React中React Slick映射图片不显示，用require后页面空白求助

问题场景 #

在React项目中使用React Slick轮播组件时，通过map遍历图片数组无法正常显示图片；尝试用require()引入图片后，页面直接变为空白。

原始代码 #

图片数组代码 #

export const urlImagenes = [
    {
        alt: 'BUENOS-AIRES-CIUDAD',
        url: "../../assets/images/PARTNERS_0000_BUENOS-AIRES-CIUDAD.jpg"
    },
    {
        alt: 'CABLEVISION',
        url: "../../assets/images/PARTNERS_0002_CABLEVISIÓN.jpg"
    },
    {
        alt: 'PREFECTURA-NAVAL',
        url: "../../assets/images/PARTNERS_0003_PREFECTURA-NAVAL.jpg"
    },
    // ...其他图片项
]

渲染代码 #

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

错误修改尝试 #

修改后的图片数组 #

export const urlImagenes = [
    {
        alt: 'BUENOS-AIRES-CIUDAD',
        url: "PARTNERS_0000_BUENOS-AIRES-CIUDAD.jpg"
    },
    {
        alt: 'CABLEVISION',
        url: "PARTNERS_0002_CABLEVISIÓN.jpg"
    },
    {
        alt: 'PREFECTURA-NAVAL',
        url: "PARTNERS_0003_PREFECTURA-NAVAL.jpg"
    },
    // ...其他图片项
]

修改后的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>
})

问题原因及解决方法 #

1. 修正require()的拼写与语法错误 #

你修改后的代码存在两个致命语法错误：

• Require首字母大写，React中必须用小写的require()
• 字符串拼接时误用了错误的反引号´，导致代码报错直接让页面崩溃

修正后的map遍历代码：

urlImagenes.map((item, index) => {
    return (
        <div key={index}>
            <img 
                className="img-fluid" 
                alt={item.alt} 
                src={require(`../../assets/images/${item.url}`)} 
            />
        </div>
    )
})

注意：图片数组中的url已经包含.jpg后缀，无需额外拼接，否则会生成xxx.jpg.jpg的错误路径。

2. 提前在数组中引入图片（更稳妥） #

可以直接在图片数组里用require()引入资源，避免动态拼接路径的潜在问题：

export const urlImagenes = [
    {
        alt: 'BUENOS-AIRES-CIUDAD',
        url: require("../../assets/images/PARTNERS_0000_BUENOS-AIRES-CIUDAD.jpg")
    },
    {
        alt: 'CABLEVISION',
        url: require("../../assets/images/PARTNERS_0002_CABLEVISIÓN.jpg")
    },
    {
        alt: 'PREFECTURA-NAVAL',
        url: require("../../assets/images/PARTNERS_0003_PREFECTURA-NAVAL.jpg")
    },
    // ...其他图片项
]

渲染时直接使用item.url即可：

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

3. 检查React Slick配置 #

页面空白也可能是轮播配置settings不合理导致元素被隐藏，确保配置符合需求，示例：

const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 1
            }
        }
    ]
};

4. 验证图片路径正确性 #

通过浏览器控制台的网络请求面板，检查图片是否返回404错误，以此确认相对路径是否匹配组件文件与图片的实际位置。

内容的提问来源于stack exchange，提问作者albert