Sign in to follow this  
ozgun

Pixi Load image from server

Recommended Posts

Hello friends. I'm tring to load an image from server url but it gives me this error :

Access to image at 'http://www.happykidgames.com/assets/blogImages/14.jpg' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource

 

This is my code :

const s = PIXI.Loader.shared.add("image","http://www.happykidgames.com/assets/blogImages/14.jpg", {crossOrigin: 'anonymous'});
        s.load(() => {
            this.image = new PIXI.Sprite(PIXI.Loader.shared.resources.image.texture);

            this.addChild(this.image);
        })

 

Edited by ozgun

Share this post


Link to post
Share on other sites

Also I'm tring something like this :

const s = ScenesManager.app.loader.add("image1","http://www.happykidgames.com/assets/blogImages/14.jpg", {crossOrigin:""});
       // PIXI.Loader.shared.baseUrl = "http://www.happykidgames.com";
        s.load(() => {
            console.log("loaded")
            this.image = PIXI.Sprite.from(ScenesManager.app.loader.resources["image1"].texture);

            this.addChild(this.image);
        })

but it gives me this error:

Uncaught TypeError: Cannot read property '_batchEnabled' of null
    at BatchPlugin.AbstractBatchRenderer.buildTexturesAndDrawCalls (core.es.js:10521)
    at BatchPlugin.AbstractBatchRenderer.flush (core.es.js:10651)
    at BatchPlugin.AbstractBatchRenderer.render (core.es.js:10500)
    at Sprite._render (sprite.es.js:356)
    at Sprite.Container.render (display.es.js:1542)
    at GameScreen.Container.render (display.es.js:1545)
    at Renderer.render (core.es.js:9914)
    at Function.ScenesManager.loop (ScenesManager.ts:66)
    at eval (ScenesManager.ts:60)

 

Share this post


Link to post
Share on other sites

When i try this the texture is coming as undefined:

const s = PIXI.Loader.shared.add("image","http://www.happykidgames.com/assets/blogImages/14.jpg", {crossOrigin:""});
        //PIXI.Loader.shared.baseUrl = "http://www.happykidgames.com";
        s.load(() => {
            this.image = new PIXI.Sprite(PIXI.Loader.shared.resources["image"].texture);
            console.log(PIXI.Loader.shared.resources["image"].texture)

            this.addChild(this.image);
        })

 

Share this post


Link to post
Share on other sites

also loader.add returns loader itself. also you cant do that if something already is loading, one loader can be used only once after you start loading.

Related to first post: it should work. I use crossOrigin:"*" but its the same. If it doesnt work for you, well, look in "network" tab of devtools and try to figure out whats wrong with that request, usual web-server-connection-debugging-stuff. I bet its not pixi related.

 

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

2020-11-02-00-19-27-W4OCK.png

 

I put breakpoint in your load callback. Then i looked up in the stack and saw that its triggered by loading of gameFont. 

OK, now is the : 
i dont like to explain pixi loader. Really.

The usual case:

loader.add(...)
loader.add(...)
loader.load(() => {
});


// sometimes in future, far far away , re-using the same loader
loader.reset(); 
loader.add(...);
loader.add(...)
loader.load(() => {
});

now what are you doing: you are re-using loader at the same time as it works on other resources, and load(callback) works not for only that resources but for others too.

How to solve that, several recipes:

1. Use different loader instances

2. after adding resource , do "loader.resources['image'].onComplete(() => { ... } );" , wait for this resource load, not for general callback

How to get to this? Why its not in docs? Ask here: https://github.com/englercj/resource-loader . Project is separate from PixiJS and you can ask @xerver why is it like this.

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

NO it is not working.

this.loader = new PIXI.Loader();
        this.loader.add("image","http://www.happykidgames.com/assets/blogImages/14.jpg", {crossOrigin:""});
        this.loader.load(() => {
            
        }).onComplete.add((loader, resources) => {
            this.image = new PIXI.Sprite(resources.image.texture);
            console.log(resources.image.texture)
            console.log("das")
            this.addChild(this.image);
        })

It now gives this error:

Ekran Alıntısı.JPG

Share this post


Link to post
Share on other sites

This is what I use:

 

var textures = new Map(); //store already loaded textures


function getSprite(url) {
    getTexture(url);

    return new Sprite(textures.get(url));
}

function getTexture(url) {
    let existingTexture = textures.get(url);
    if (existingTexture) {
        return existingTexture;
    }
    let texture = Texture.from(url);
    textures.set(url, texture);
    return texture;
}

 

Share this post


Link to post
Share on other sites

Check the network tab if you are still getting the cors error. To fix that you would need to either run the game on the same domain as the images to ignore cors-rules or have the server send a crossOrigin header that applies to your domain or just a wildcard. The renderers null error might just be due to asset not being loaded as cors blocks it.

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.