Pixi Load image from server

[ozgun]

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 November 1, 2020 by ozgun

[ozgun]

any idea?

[ozgun]

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)

 

[ozgun]

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);
        })

 

[ozgun]

@Exca

[ivan.popelyshev]

nope, its new PIXI.Sprite(texture);

 

PIXI.Sprite.from(texture);

Edited November 1, 2020 by ivan.popelyshev

[ivan.popelyshev]

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 November 1, 2020 by ivan.popelyshev

[ozgun]

But the testure is returning undefined in console

 this.image = new PIXI.Sprite(PIXI.Loader.shared.resources["image"].texture);

 

[ivan.popelyshev]

make a full demo, zip file or jsfiddle, whatever, i'll look. Yes, its frustrating sometimes:)

Edited November 1, 2020 by ivan.popelyshev

[ozgun]

Here is project

 

Edited November 1, 2020 by ozgun

[ozgun]

Problem is in the ScratchArea.ts file

[ozgun]

@ivan.popelyshev

 

[ivan.popelyshev]

 

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 November 1, 2020 by ivan.popelyshev

[ozgun]

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:

[ivan.popelyshev]

onComplete is on resource, not on loader. resource is not returned. you have to specify it like "loader.resources['image'].onComplete.add(...)"

[ozgun]

Ok but loader.resources['image'] doesn't have an onComplete method ?

[ozgun]

Sorry, forget to use resources-loader. Now i've used but at this time loader.resources['image'] doesnt have a texture property =(

[que]

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;
}

 

[ozgun]

Is there no possibilities to make this?

[Exca]

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.