Correct picture path - reactjs

Question

I have this site
(Gatsby and Strapi API deployed in Heroku). My problem is that I can't find the proper path to render the pictures.
Here is the API and here is the repo.
My code regarding the rendering of the pics:
.map(band => (
<article className="bands" key={band.id}>
<h2>{band.band_name}</h2>
<img
src={band.band_img.name}
alt={band.band_name}
/>
<p>{band.band_desc}</p>
I've already replace src={band.band_img.name} to a number of things like:
band.band_img.formats.thumbnail.url
band.band_img.url
so on and so forth to no avail.
A friend of mine told me to create .env files
uploads_path: /uploads/ (.env.production)
and
uploads_path: uploads/ (.env)
I did and nothing.
Picture of console.log(band.band_img)
Please, any suggestions? Thank you in advance.

Answer 1

Your problem is that the images are not being uploaded. If you look at the following images path, they won't be displayed (what you were trying so far):
https://lebraojohns.netlify.app/static/uploads/thumbnail_badreligion_7007c2c028.jpeg
https://lebraojohns.netlify.app/uploads/thumbnail_badreligion_7007c2c028.jpeg
I've tried looking at several paths but none of them worked for me.
You won't see any image so your code is not able to display anything at band.band_img.name with according to your API is where it should be:
band_img: {
id: 7,
name: "badreligion.jpeg",
alternativeText: "",
caption: "",
width: 315,
height: 160,
formats: {
thumbnail: {
ext: ".jpeg",
url: "/uploads/thumbnail_badreligion_7007c2c028.jpeg",
hash: "thumbnail_badreligion_7007c2c028",
mime: "image/jpeg",
name: "thumbnail_badreligion.jpeg",
path: null,
size: 9.63,
width: 245,
height: 124
}
}
P.S: I love Bad Religion and all the bands 🤘
Your code looks good as soon as you fix your image uploading/server issue the code should work alone.
The images that you have stored under /src/assets will be never accessible for your code (transpiled to the public folder) unless you use them in one component.
Depending on your specifications, you can bypass it by adding your images under the /static folder to clone them into the public one.

Answer 2

It's a problem with your server, for example the following should work:
const getBandImg = (band) => band.band_img?.formats?.url;
And to use it anywhere you want to get the img url:
.map(band => (
<article className="bands" key={band.id}>
<h2>{band.band_name}</h2>
<img
src={getBandImg(band)}
alt={band.band_name}
/>
<p>{band.band_desc}</p>
Which you already tried with band.band_img.formats.thumbnail.url, but after taking a look at your website, I noticed that the images aren't reachable either in the API or the frontend, for example:
https://john-strapi.herokuapp.com/uploads/dri_6a22b5e947.jpeg
Doenst return the image
https://lebraojohns.netlify.app/uploads/dri_6a22b5e947.jpeg
Neither
So it is something you have to solve in your host, not a problem with gatsby