citr-v6-project icon indicating copy to clipboard operation
citr-v6-project copied to clipboard

Images not loading

Open Gynko opened this issue 3 years ago • 2 comments

I get this error in the devtools console: GET http://pets-images.dev-apis.com/pets/bird2.jpg net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep No pictures are displaying. Example of one error as seen in the devtools/network:

Request URL: http://pets-images.dev-apis.com/pets/dog25.jpg
Referrer Policy: strict-origin-when-cross-origin
Content-Length: 23166
Content-MD5: ZZ42lZn3Giau/oYSVTnmcA==
Content-Type: image/jpeg
Date: Mon, 20 Sep 2021 16:42:08 GMT
ETag: 0x8D8DB6341F385A3
Last-Modified: Sat, 27 Feb 2021 21:04:22 GMT
Server: Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0
not-setcross-origin-resource-policy
To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers:
Cross-Origin-Resource-Policy: same-siteChoose this option if the resource and the document are served from the same site.
Cross-Origin-Resource-Policy: cross-originOnly choose this option if an arbitrary website including this resource does not impose a security risk.
Learn more in the issues tab
x-ms-blob-type: BlockBlob
x-ms-lease-status: unlocked
x-ms-request-id: a0463c6b-501e-0048-0b3e-aef542000000
x-ms-version: 2009-09-19
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,nb;q=0.8,fr;q=0.7
Connection: keep-alive
Host: pets-images.dev-apis.com
Referer: http://localhost:1234/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

Gynko avatar Sep 20 '21 16:09 Gynko

i downloaded the source files from the lesson, did npm install, and it all works as it should. I might have done a little npm update or something, which may have broken a dependency or something !

Gynko avatar Sep 20 '21 18:09 Gynko

I found that this an issue because of parcel 2.0.

When using this parcel version, there are some issues with the url( ) image references. I fixed this by downloading the images and creating an "images" folder in the project and directly referencing those images rather than the url.

background-image: url(./img/logo.png);

Gavin-Fauth avatar Sep 24 '21 01:09 Gavin-Fauth