React项目网页轮播组件中图片无法正常显示问题求助

我创建了data.js和slider.js两个文件，从data.js读取数据供slider.js组件使用，目前数据里的title、desc字段都能正常渲染，只有图片无法正常显示，作为React初学者需要明确问题原因和修复方案。

相关代码 #

data.js #

//This is data.js
export const sliderItems = [
    {
      id: 1,
      img: "",
      title: "FANTASTIC PRESALE",
      desc: "SAVE BIG ON ABS GAMING SYSTEMS High Refresh Rate Monitors & other hardware components! Upto 60% Off",
      
    },
    {
      id: 2,
      img: "../images/img2.png",
      title: "Title 2",
      desc: "Desc 2",
      
    },
    {
      id: 3,
      img: "../images/img2.png",
      title: "Title 3",
      desc: "Desc 3",
    },
  ];

slider.js #

const Slider = () => {
    const [sideIndex, setSlideIndex] = useState(0);
    const handleClick = (direction) => {

    };
  return (
    <Container>
        <Arrow direction="left" onClick={()=>handleClick("left")}>
        <ArrowLeftOutlined />
        </Arrow>
        <Wrapper>
            {sliderItems.map(item=>(
            <Slide >
            <ImgContainer>
            <Image src={item.img}/>
            </ImgContainer>
            <InfoContainer>
                <Title>{item.title}</Title>
                <Desc>{item.desc}</Desc>
                <Button>SHOP NOW</Button>
            </InfoContainer>
            </Slide>
            ))};
        </Wrapper>
        <Arrow direction="right" onClick={()=>handleClick("right")}>
        <ArrowRightOutlined/>
        </Arrow>
    </Container>
  )
}

• 第一条轮播数据的img字段为空字符串，没有传入有效图片地址，本身就无法加载出图片。
• React项目使用的Webpack/Vite等打包工具，默认不会把JS对象里写的相对路径字符串识别为静态资源依赖：你写的../images/img2.png只是普通文本，打包时不会把对应图片处理到输出目录，也不会替换为打包后的真实访问路径，浏览器发起请求时会找不到对应资源返回404。
• 原生HTML里写相对路径的逻辑不适用于React JS代码里的静态资源引用，二者的路径解析规则完全不同。

方案1：导入图片后使用（推荐） #

在data.js中先把需要用到的图片作为模块导入，再赋值给img字段，打包工具会自动处理资源路径，确保访问地址正确。
修改后的data.js代码：

// 按照实际文件层级写对导入路径
import img1 from "../images/img1.png"; // 第一张轮播的图片，替换成你自己的文件名
import img2 from "../images/img2.png";

export const sliderItems = [
    {
      id: 1,
      img: img1,
      title: "FANTASTIC PRESALE",
      desc: "SAVE BIG ON ABS GAMING SYSTEMS High Refresh Rate Monitors & other hardware components! Upto 60% Off",
      
    },
    {
      id: 2,
      img: img2,
      title: "Title 2",
      desc: "Desc 2",
      
    },
    {
      id: 3,
      img: img2,
      title: "Title 3",
      desc: "Desc 3",
    },
  ];

slider.js代码不需要改动，保存后即可正常加载图片。

方案2：将图片放到public目录 #

如果是用create-react-app搭建的项目，可以把存放图片的images文件夹整体移动到项目根目录的public文件夹下，之后JS里的图片路径改成以/开头的绝对路径即可，不需要额外导入：

{
  id: 2,
  img: "/images/img2.png",
  // 其余字段不变
}

这种方式下打包工具会原样保留public目录下的资源，浏览器会从站点根目录开始查找图片，不会出现路径解析错误。

注意：无论用哪种方案，都要给第一条轮播数据补上有效的图片地址，否则该项始终无法显示图片。

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