8Observer8

Image is not loaded on Playground

Recommended Posts

Hello,

I want to load an image on playground. My code works locally but when I load on Playground it does not work. And I do not see errors in console.

The Example on Playground.

This message is strange:

Quote


 %c %c %c PixiJS 5.0.4 - ✰ WebGL 1 ✰  %c  %c http://www.pixijs.com/  %c %c ♥%c♥%c♥ 

 background: #ff66a5; padding:5px 0; background: #ff66a5; padding:5px 0; color: #ff66a5; background: #030307; padding:5px 0; background: #ff66a5; padding:5px 0; background: #ffc3dc; padding:5px 0; background: #ff66a5; padding:5px 0; color: #ff2424; background: #fff; padding:5px 0; color: #ff2424; background: #fff; padding:5px 0; color: #ff2424; background: #fff; padding:5px 0;

 

Share this post


Link to post
Share on other sites

That's the first time i see text png file with base64 inside.

Also in case there will be crossorigin problem after you fix that base64 mishap: usually in playgrounds i use this setting

const loadOptions = { crossOrigin: true };

app.loader.add("enemy", "./assets/48_enemy.png", loadOptions);

I hope you wont meet with Cross-Origin-Ritual-Sacrifice, and I really dont have time to explain what is that :)

Share this post


Link to post
Share on other sites
2 minutes ago, ivan.popelyshev said:

its because texture doesnt exist. maybe crossOrigin issue. Oh , right, dropbox - you cant load files from dropbox , their server prevents that.

It did not work locally because I forgot to comment this:
 

        Object.keys(PIXI.utils.TextureCache).forEach((texture) =>
        {
            PIXI.utils.TextureCache[texture].destroy(true);
        });

 

Share this post


Link to post
Share on other sites

Here, I added my png, its not base64.

However, now that playground doesnt serve me that file. At all. There's nothing in "images/ship.png" it tried to load. I dont have anymore time to "play" with that playground, i use others.

 

https://next.plnkr.co/edit/TMhxNzFY0h2vBRDg

Share this post


Link to post
Share on other sites
Just now, ivan.popelyshev said:

Curse that playground, just choose another!

Please, give me a link on another that can keep TypeScript classes in separated files. I found only this one. I think it is the best. I do not know another. I will keep my image files on DropBox.

Share this post


Link to post
Share on other sites

https://codesandbox.io/ , there's limit on uploaded files (images), but everything else is fine. Except online editing with friends - dont try that.

Here's one of my js projects: https://codesandbox.io/s/tender-franklin-iycmu

I dont remember about TS, but i thought i tested it there too.

Share this post


Link to post
Share on other sites

Good. But I do not use Webpack, Gulp, Grunt and so on. I use AMD-compilation and Require.js for debug mode in VSCode. And Browserify for Release mode. I can just copy my files on Plunker without modifications. I do not have enough time for modifications and I do not have time to study new Playground. Plunker is ideal for me.

I do not this this because it is complicated for beginners:

(window as any).PIXI = PIXI;
export let app = (global.app = new Application());

And it is complicated for me too. I make this examples for beginners. As you said CodeSandbox is limited to upload images. It is not difference where I will keep files for Plunker and CodeSandbox. I will keep them on DropBox.

Share this post


Link to post
Share on other sites
33 minutes ago, ivan.popelyshev said:

Dropbox has traffic/requests limit.

As you can see I have low-traffic examples.

I found this information:

Quote

According to Dropbox support, public links for free accounts may not use more than 10GB of bandwidth per day

It is enough for me now. But what do you think about keeping images on GitHub?

I can get a direct link like this: https://raw.githubusercontent.com/8Observer8/8observer8.github.io/master/Assets/LearnPixiJS/Images/cat.png cat.png 

And it works on Plunker: https://next.plnkr.co/edit/0FmksaR02yCUs63T?preview

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.