React cannot load image from url, but can load with normal http call

Question

Hello I tried to load a manga image from this URL for example (mangaeden api)

<img src="https://cdn.mangaeden.com/mangasimg/0d/0d02206d3b612b859a386537d7de8d7941427c696e9b16a99d3891a0.jpg" />

this is returning 403 on the network log history. failed image

But when I tried to get the image from browser, it is showing just fine success image

current web state my project current state

the same image directly called from browser success image

my react code

            {
              mangaList.manga.map(manga_object => (
                <div className="col-sm-3" key={manga_object.i}>
                  <div className="card">
                    <img
                      className="card-img-top"
                      alt={manga_object.t}
                      rcset={
                        "https://cdn.mangaeden.com/mangasimg/600x/" + manga_object.im + " 600w," +
                        "https://cdn.mangaeden.com/mangasimg/" + manga_object.im + " 975w"
                      }
                      src={"https://cdn.mangaeden.com/mangasimg/" + manga_object.im}
                    />
                    <div className="card-body">
                      <p className="card-text">{manga_object.t}</p>
                      <a href={"https://cdn.mangaeden.com/mangasimg/" + manga_object.im} target="_blank">link</a>
                    </div>
                  </div>
                </div>
              ))
            }

that's the img properties from manga eden, i tried to copy the way they load the image. also not working after i removed it. getting thos properties from here https://www.mangaeden.com/en/en-manga/bleach/686/1/ — Muhammad Umar Ramadhana, Jun 15 '20 at 03:39
Are you sure that 'mangaList.manga' is an array and contains any information? — Rafael Mora, Jun 15 '20 at 03:40
I just saw the way it behaves and it seems like you need to use something else to fetch the image because you are getting the 403 status code which means the resource is not letting your img tag to get the file you want. — Rafael Mora, Jun 15 '20 at 03:46
that's work like magic @Hangindev thanks for pointing that out — Muhammad Umar Ramadhana, Jun 15 '20 at 03:49

React cannot load image from url, but can load with normal http call

0 Answers0