cocoscreator动态加载网络图片的问题

Question

COCOS 动态加载网络图片的问题

var tt = "https://p0.ssl.qhimgs1.com/t04c843d268e111a1f4.jpg";
          
// 动态加载图片资源
cc.loader.loadRes({ url: tt, type: 'jpg'}, cc.SpriteFrame, function (err, spriteFrame) {
    if (err) {
        console.log("sdf")
        cc.error(err.message || err);
        return;
    }
    // 设置Sprite组件的SpriteFrame为加载的图片资源
    ent1.spriteFrame = spriteFrame;

});

这个图片地址是没问题的
https://p0.ssl.qhimgs1.com/t04c843d268e111a1f4.jpg

加载本地图片也是没有问题的

但是加载网络图片就报错Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

到底问题出在哪了 愁人了 一周了闹得人吃饭也没心情 睡觉老做噩梦 麻烦死了

Answer 1

晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

你遇到的问题是因为动态加载网络图片时，使用了不支持的URL Scheme导致的。Cocos Creator中的cc.loader.loadRes()方法用于加载本地资源，但不支持直接加载网络图片。解决此问题的方法有以下几种：

1. 使用cc.loader.load()方法加载网络图片： cc.loader.load(tt, (err, texture) => { if (err) { cc.error(err.message || err); return; } let spriteFrame = new cc.SpriteFrame(texture); ent1.spriteFrame = spriteFrame; });

2. 使用cc.assetManager.loadRemote()方法加载网络图片： cc.assetManager.loadRemote(tt, cc.Texture2D, (err, texture) => { if (err) { cc.error(err.message || err); return; } let spriteFrame = new cc.SpriteFrame(texture); ent1.spriteFrame = spriteFrame; });

3. 使用cc.assetManager.loadRemote()方法加载网络图片并缓存到本地： const remoteUrl = "https://p0.ssl.qhimgs1.com/t04c843d268e111a1f4.jpg"; cc.assetManager.loadRemote(remoteUrl, (err, texture) => { if (err) { cc.error(err.message || err); return; } let spriteFrame = new cc.SpriteFrame(texture); ent1.spriteFrame = spriteFrame; }, { ext: ".jpg" });

注意事项：

• 在使用cc.loader.load()或cc.assetManager.loadRemote()加载网络图片时，需要注意**CORS（跨域资源共享）**问题。如果你加载的图片跨域了，需要确保服务器已经设置了正确的CORS头部信息，否则会导致加载失败。
• 在实际开发中，通常需要先预加载并缓存网络图片，然后再使用。这样可以避免多次加载同一张图片，提高加载效率。

希望以上解决方案能够帮到你解决问题。如果还有其他问题，请随时提问。