React无法加载本地图片：Masonry画廊本地路径失效求助

在React项目中直接使用src/assets/1.PNG这类本地文件路径无法加载图片，是因为webpack对静态资源的处理规则导致的，你可以通过以下两种方式解决：

方法1：使用import导入图片 #

在使用图片的组件文件顶部先导入本地资源，再将导入的变量放入图片数组：

// 假设你的组件在src/components/Header/Header.jsx
import img1 from '../../assets/1.PNG';
// 多张图片可依次导入
// import img2 from '../../assets/2.PNG';

const images = [
  img1,
  // img2
];

<Masonry columnsCount={3} gutter="20px">
  { images.map((image, i) => (
    <a data-fancybox="gallery" href={image}>
      <img
        key={i}
        src={image}
        style={{width: "100%", display: "block", cursor: "pointer"}}
        alt={`gallery-img-${i}`}/>
    </a>
  ))}
</Masonry>

方法2：使用require语法直接引用 #

无需提前导入，直接在数组中用require()引入图片，注意相对路径的正确性：

// 组件位置对应相对路径为../../assets/1.PNG
const images = [
  require('../../assets/1.PNG').default,
  // require('../../assets/2.PNG').default
];

<Masonry columnsCount={3} gutter="20px">
  { images.map((image, i) => (
    <a data-fancybox="gallery" href={image}>
      <img
        key={i}
        src={image}
        style={{width: "100%", display: "block", cursor: "pointer"}}
        alt={`gallery-img-${i}`}/>
    </a>
  ))}
</Masonry>

注意事项 #

• 确认相对路径正确：比如组件在src/components/Header/Header.jsx，到src/assets/1.PNG的相对路径是../../assets/1.PNG（向上两级目录）。
• 注意文件名大小写：在Linux/macOS等区分大小写的系统中，1.PNG和1.png会被识别为不同文件。

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