React自定义轮播图组件开发时图片无法正常显示问题求助

AI 小北

2026-9-30

React轮播图图片加载失败解决方案

问题原因

图片无法加载的核心问题是React 不会解析运行时作为字符串传递的相对资源路径，你在images数组中直接书写的"../images/pharma.jpg"仅作为普通字符串传递给img标签的src属性时，打包工具不会将其识别为资源引入，最终路径无法正确映射到本地图片资源。

解决方案

提供两种通用可行方案：

方案1：将静态图片放入public文件夹

把你的images文件夹整体移动到项目根目录的public文件夹下
修改Slider组件里的图片路径为对应public目录的绝对路径：

const images = [
    {
        id: 2,
        title: "imageTwo",
        img: "/images/pharma.jpg"
    }
]

该方案适合图片数量多、不需要做模块级处理的场景。

方案2：用import提前导入图片资源

修改Slider组件代码，先导入图片资源再存入数组：

import './Slider.css'
import SliderContent from "./SliderContent";
// 提前导入图片
import pharmaImg from "../images/pharma.jpg"

const images = [
    {
        id: 2,
        title: "imageTwo",
        img: pharmaImg
    }
]

export default function Slider(){
    return(
        <>
            <div className="slider">
                <SliderContent slides={images} />
            </div>
        </>
    )
}