Nextjs not displaying the image send from backend?

Asked Jan 11 '22 at 08:20

Active Jan 11 '22 at 11:06

Viewed 525 times

{ "id": 89, "url": "https://homez.d.deli.work/storage/89/IMG_٢٠٢١٠٢٠٩_٢٢٤٤٠٠.jpg", "preview": "https://homez.d.deli.work/storage/89/IMG_٢٠٢١٠٢٠٩_٢٢٤٤٠٠.jpg", "name": "IMG_٢٠٢١٠٢٠٩_٢٢٤٤٠٠", "file_name": "IMG_٢٠٢١٠٢٠٩_٢٢٤٤٠٠.jpg", }

here is the object send from the backend, image url is shown normally in the browser but not shown in the code <Image src={meal?.images[0]?.preview || placehoderImage} alt="meal img"/> and the alt tag is shown instead, I don't know why I think becuase image name contains some non-english numbers. how can i handle this?

edited Jan 11 '22 at 11:06

juliomalves

42,130
20
150
146

asked Jan 11 '22 at 08:20

Abdelrhman Gad

Do you have some error when loading image in network tab in dev tools? – Wraithy Jan 11 '22 at 08:35
3

Try encoding the URI like: `src={encodeURI(meal?.images?.[0]?.preview) || placeholderImage}`. Not sure if it will work. – brc-dd Jan 11 '22 at 08:37
@Wraithy, No I have no erros at all – Abdelrhman Gad Jan 11 '22 at 08:38
@brc-dd, Thank you very much, It worked however I don't understand excatly what `encodeURI` did to the url – Abdelrhman Gad Jan 11 '22 at 08:41
2

@AbdelrhmanGad Refer this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI, it basically changed your UTF-8 characters to equivalent escape sequences so that the resultant URL can be represented using ASCII characters only. – brc-dd Jan 11 '22 at 08:46
@brc-dd Okay now i get it,thanks – Abdelrhman Gad Jan 11 '22 at 08:52
Does this answer your question? [Encode URL in JavaScript?](https://stackoverflow.com/questions/332872/encode-url-in-javascript) – juliomalves Jan 12 '22 at 12:13

Nextjs not displaying the image send from backend?

0 Answers0