如何修复React中图片显示为破损图标的问题

DevOps 小满

2026-8-5

图片显示破损的修复方案

核心原因

React项目中，直接用字符串形式的相对路径（如./img/PvsZ.jpg）引用src目录内的静态资源时，Webpack不会解析该路径，打包后实际资源路径与代码中写的路径不匹配，导致图片加载失败。

解决方案

方案1：在Data.js中直接导入图片（推荐）

修改Data.js代码，先导入图片资源，再把导入的变量赋值给image字段：

// Data.js
import PvsZImage from './img/PvsZ.jpg';

const GalleryData = [
    {
        id: 1,
        title: "Plants vs. Zombie Clone",
        image: PvsZImage,
        year: "DD/Mon/Year",
        role: ["Back end developer"],
        type: ["Coding", "type2"],
        desc: "hello"
    },
];
export default GalleryData;

这种方式下Webpack会自动处理图片资源，将其复制到打包后的输出目录，并返回正确的访问URL，Project.js无需修改就能正常显示图片。

方案2：将img文件夹移至public目录（适合大量静态资源）

如果项目有public目录，把img文件夹放入public目录下，然后修改Data.js中的图片路径为根相对路径：

// Data.js
const GalleryData = [
    {
        id: 1,
        title: "Plants vs. Zombie Clone",
        image: "/img/PvsZ.jpg", // 根相对路径，从public目录开始
        // 其他字段...
    },
];

public目录下的资源会直接复制到打包后的根目录，无需Webpack解析，通过根相对路径可直接访问。