loadImage() impossible de charger l'image (P5.js WebGL)

J'essaye de charger une image appelée "border.bmp" pour que je puisse l'utiliser comme texture pour WebGL. Voici comment je fais référence à l'image.loadImage() impossible de charger l'image (P5.js WebGL)

var img; 
function preload() { 
    img = loadImage("assets/border.bmp"); 
}

Je reçois alors cette erreur dans la console.

Access to Image at 'file:///C:/P5.js/empty-example/assets/border.bmp' from 
origin 'null' has been blocked by CORS policy: Invalid response. Origin 
'null' is therefore not allowed access.

Qu'est-ce que ce message d'erreur? Qu'est-ce que ça veut dire? Comment charger l'image?

Source

2017-10-14 Randy Matinee

La solution consiste à utiliser un serveur Web simple. Cela vous prendra <2 minutes. [En voici un] (https://greggman.github.io/servez/) et [en voici encore un peu] (https://stackoverflow.com/questions/12905426/what-is-a-faster-alternative-to-pythons -http-server-or-simplehttpserver). Servir votre dossier p5.js puis aller à 'http: // localhost: 8080' ou quel que soit le port que le serveur que vous décidez d'utiliser sert sur – gman

CORS Stands pour Cross-origin resource sharing. Par défaut, WebGL bloquera toute ressource (images, textures, etc.) provenant de n'importe quelle origine externe. WebGL pense que la ressource locale provient d'une origine externe.

Vous pouvez contourner cela en utilisant img.crossOrigin = ""; Je ne suis pas un expert en WebGL, toutes ces informations a été trouvé here

Source

2017-10-14 11:13:21 Dale

Merci pour la réponse; Cependant, cela a été programmé dans p5.js qui est une bibliothèque pour JavaScript, ce code ne fonctionne pas avec ce que je fais. Cela m'aide à trouver une solution. –

Le commentaire par gman et la réponse par Dale sont deux corrects. Je vous recommande fortement de prendre le temps de comprendre exactement ce qu'ils disent avant de les rétrograder ou de les rejeter. CORS est synonyme de partage de ressources d'origines croisées, et fondamentalement c'est ce qui permet ou empêche JavaScript sur un site d'accéder à des choses sur un autre site. Une recherche rapide sur google de "JavaScript CORS" ou juste "cors" vous donnera une tonne d'informations que vous devriez lire. Donc, si vous obtenez une erreur CORS, cela signifie que le site qui contient votre image ne laisse pas le site qui détient votre code accéder à l'image. Dans votre cas, il semble que vous chargiez des éléments à partir d'une URL file:, qui est et non en cours de chargement à partir d'un serveur. C'est ce que signifie la partie Origin null de l'erreur. Par conséquent, la première étape consiste à écouter le commentaire de gman et à exécuter votre esquisse à partir d'un serveur Web local au lieu d'utiliser une URL file:. Son commentaire contient déjà des liens expliquant comment faire cela, ou vous pouvez utiliser the P5.js web editor ou CodePen ou tout autre hébergeur de base.

La configuration la plus courante consiste à inclure les fichiers d'image dans le même serveur que le code, ce qui devrait être pratiquement tout ce que vous devez faire. Mais si vous stockez les images à une URL différente de celle du code, l'étape 2 consiste à suivre la réponse de Dale et à configurer votre serveur d'images pour autoriser les requêtes provenant de votre serveur de code.

Source

2017-10-14 17:07:19

loadImage() impossible de charger l'image (P5.js WebGL)

Répondre

Questions connexes