Can´t display images in React

Question

I'm trying to have a React Slick but when I map the images they are not displaying correctly.

I saw that some people uses Require() statement but when I use it I have a blank page.

This is my component with images:

export const urlImagenes = [
    {
        alt: 'BUENOS-AIRES-CIUDAD',
        url: "../../assets/images/PARTNERS_0000_BUENOS-AIRES-CIUDAD.jpg"
    },
    {
        alt: 'CABLEVISION',
        url: "../../assets/images/PARTNERS_0002_CABLEVISIÓN.jpg"
    },
    {
        alt: 'PREFECTURA-NAVAL',
        url: "../../assets/images/PARTNERS_0003_PREFECTURA-NAVAL.jpg"
    },
....
]

And here I map them

return (
  <div className="partners-container container">
    <h2>Partners</h2>
    <p>
      Multiradio posee acuerdos estratégicos con compañías internacionales
      de primer nivel, garantizando así, el éxito en cada uno de los
      proyectos desarrollados.
    </p>

    <div>
      <Slider {...settings}>
        {
            urlImagenes.map((item, index) => {
                return <div key={index}>
                    <img className="img-fluid" alt={item.alt} src={item.url}></img>
                </div>
            })
        }
      </Slider>
    </div>
  </div>
);

I tried with Require() like this:

Firstly: changing the url in the Images components:

export const urlImagenes = [
    {
        alt: 'BUENOS-AIRES-CIUDAD',
        url: "PARTNERS_0000_BUENOS-AIRES-CIUDAD.jpg"
    },
    {
        alt: 'CABLEVISION',
        url: "PARTNERS_0002_CABLEVISIÓN.jpg"
    },
    {
        alt: 'PREFECTURA-NAVAL',
        url: "PARTNERS_0003_PREFECTURA-NAVAL.jpg"
    },
....
]

Second: changing the map:

urlImagenes.map((item, index) => {
                return <div key={index}>
                    <img className="img-fluid" alt={item.alt} src={Require('../../assets/images/' + item.url ´'.jpg')}></img>
                </div>
            })

But doing this way I only have a Blank page...

enter image description here

Can anyone help me?

With the require method Looks like `item.url` already has `.jpg` and you're still appending a `.jpg` . Also you need to confirm the path is correct to where the image can be found — Fowotade Babajide, Jan 10 '23 at 14:36
If I have .jpg in url or not, is the same, is not working if I add .jpg in Require statement or not — albert, Jan 10 '23 at 14:37
I think the URLs you use are incorrect: Your app should have an "assets" or "public" folder, where your images are located. The URLs should be relative to that folder. So for example the image `assets/images/my_img.png` would have the url "/images/my_img.png". — Benno Straub, Jan 10 '23 at 14:38
Do you import the urls file into component file? `import urlImagenes from "./urlImagenes.js"` — LucianDex, Jan 10 '23 at 14:42

score 0 · Accepted Answer · answered Jan 10 '23 at 14:41

As this answer mentions, the relative URLs you are using are relative to your current URL, not the file system. To solve this problem, you can either import images using the absolute URL as the answer mentions, or import images at the top of your file:

import MyImage from '../../images/image.png';

const MyComponent = () => <image src={MyImage} />;

Be careful using the absolute URL as mentioned in the answer, since your URL in production will not be http://localhost:3000.

You gave me an idea, I will import the images in the component where I have all the images, in the image Components — albert, Jan 10 '23 at 14:50

score 0 · Answer 2 · answered Jan 10 '23 at 15:10

  const images = [
    {
      alt: "logo",
      url: "logo",
    },
    {
      alt: "logo2",
      url: "logo2",
    }
  ];

and in the component (notice the .default)

 return (
    <>
      {images.map((item, index) => {
        return (
          <div key={index}>
            <img
              className="img-fluid"
              alt={item.alt}
              src={require("../assets/images/" + item.url + ".png").default}
            />
          </div>
        );
      })}
    </>
  );

Can´t display images in React

2 Answers2