React.js中使用Props渲染多张本地图片的加载问题

• 问题核心：直接传递本地图片路径作为props时，React无法正确解析静态资源路径，导致图片加载失败。

具体解决方法 #

方法1：通过import引入图片 #

在index.js中先导入本地图片资源，再将导入的变量作为props传递：

// index.js
import img1 from './assets/image1.jpg';
import img2 from './assets/image2.jpg';
import img3 from './assets/image3.jpg';
import img4 from './assets/image4.jpg';

// 传递给Card组件
<Card img={img1} />
<Card img={img2} />
<Card img={img3} />
<Card img={img4} />

在Card.js中直接使用props中的图片变量：

// Card.js
function Card(props) {
  return (
    <div className="card">
      <img src={props.img} alt="卡片图片" />
      {/* 其他卡片内容 */}
    </div>
  );
}

方法2：将图片放入public文件夹 #

把图片放到项目根目录的public文件夹下（比如public/images），然后传递相对于public的路径作为props：

// index.js
<Card img="/images/image1.jpg" />
<Card img="/images/image2.jpg" />
<Card img="/images/image3.jpg" />
<Card img="/images/image4.jpg" />

Card.js中的写法和上面一致，直接使用props.img作为src值即可。

方法3：使用require动态引入（适用于半静态路径） #

如果需要动态指定路径，可使用require，但注意路径必须是webpack能静态解析的：

// Card.js
function Card(props) {
  return (
    <div className="card">
      <img src={require(`./assets/${props.img}`)} alt="卡片图片" />
      {/* 这里props.img需是图片文件名，比如"image1.jpg" */}
    </div>
  );
}

注意：React项目中，只有通过import导入或放在public文件夹的资源，才能被webpack正确打包并生成可访问的路径，直接使用本地系统绝对路径或未被webpack处理的相对路径，会导致页面加载时无法找到图片资源。

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