btholt / citr-v6-project

Project files for the Complete Intro to React v6, as taught for Frontend Masters
Apache License 2.0
482 stars 458 forks source link

Images not loading #18

Open Gynko opened 3 years ago

Gynko commented 3 years ago

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 commented 3 years ago

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 !

Gavin-Fauth commented 3 years ago

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