Can´t display images in React-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

  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>
        );
      })}
    </>
  );