Vuejs - atlas unable to load png file

eugenechua

Hi, I am using the spine web player with nuxt2, currently i have [json, atlas, png] file under static/spine file
but it keep showing the error "zus is not defined"

location: static/spine/zus.teach1.atlas

zus.teach1.png
size:1703,1784
filter:Linear,Linear
pma:true
P_Star_0000
bounds:1238,463,43,43

those file works properly at normal .html and also absolute URLs
thanks for helping

Mario

I'm not familiar with Vuejs or nuxt, but it looks like you are trying to pack the .atlas and .json files straight into the bundled .js file, which means, their content wil be embedded. The player requires a https:// url to work. However, you are passing the contents as jsonUrl and atlasUrl.

It may be possible to use Vuejs/nuxt embedding together with the player by using raw data URIs. Note however, that those need to be base64 encoded, so after import you'll need to base64 encode the data URIs before passing them to the player. See https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-player/example/embedding-json-example.html

eugenechua

I'll try base64, thanks for the reply!