Home > front end >  react load image with typescript
react load image with typescript

Time:09-23

I am working on a new react object with react

i am using redux and it works fine on the route I am setting the state

but when I navigate to another route using link tag I get the state from store and use it to display some content and the text appears perfectly but in the template the image I get not loaded

I inspected the page and copy the src attr from html and paste it to a new tab it's work fine

 <img src={`127.0.0.1:8000${profileInfo.cover_image}`}id="cover-photo" />

here what I mean the inspect url

the link in src attr here

I dont know why the image not loaded in the template seems every think fine

thanks for help

CodePudding user response:

That's an invalid URL.

You should use:

`//127.0.0.1:8000${profileInfo.cover_image}`
or
`http://127.0.0.1:8000${profileInfo.cover_image}`

It works when you paste it in a new tab, because the browser is trying to guess the correct protocol from user input, but it doesn't do the same inside pages because that's supposed to be a correct reference.

  • Related