0

Im working on a project where i get a link to an image from my DB.

This is the code which loads the image.

export const PostImage = styled.div`
  background-image: url(${props => (props.bgimg ? props.bgimg : singlePostBgImg)});
  background-position: center center;
  background-size: cover;
  height: 600px;
  position: relative;

when i am using a link of this type it works perfectly:

http://s3.amazonaws.com/xxx.com/xxx-images/hotel-4_thumb.jpg

however, when i use a link to an image inside my own computer, no picture is displayed.

file:///C:/Users/Andre/Desktop/PFP/pssv.jpg
C:/Users/Andre/Desktop/PFP/pssv.jpg

when i use the Links in the browser they work perfectly. What did i wrong?

Andre
  • 35
  • 5
  • Does `file:///C:` tries to load in network tab? Maybe it's CORS that blocks access? – Justinas Nov 03 '20 at 12:39
  • [This](https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome/6083677#6083677) ..? – Teemu Nov 03 '20 at 12:39
  • @Justinas Sorry for the late answer. i looked up and chrome prohibit the access. Errror scroll-spy.js:40 Not allowed to load local resource: file:///C:/Users/Andre/Desktop/PFP/pssv.jpg What should i do? – Andre Nov 05 '20 at 14:31
  • Put your resources under same folder as your index file. Otherwise it will not be loaded (offline CORS are even more strict). – Justinas Nov 05 '20 at 19:28

0 Answers0