如何在使用require时让props直接在img标签中生效？

问题场景 #

通过组件props传递图片路径，组件内用require(props.img)加载时会抛出Cannot find module 'card-1.png'错误，代码示例：

// 父组件调用
<Card img="card-1.png" />

// Card组件实现
function Card(props){
   return(
       <img src={require(props.img)} alt="card1" />
   )
}

但直接在require中写死路径就能正常运行：

function Card(props){
   return(
       <img src={require("card-1.png")} alt="card1" />
   )
}

原因说明 #

Webpack等前端打包工具在编译阶段会解析require中的静态字符串路径，提前完成图片资源的处理（比如复制、重命名、生成哈希文件名）。而props.img是运行时才确定的动态值，编译阶段打包工具无法预知具体要加载哪个图片，因此会报错找不到模块。

解决方案 #

方案1：提前导入图片模块再传递

先在父组件中导入需要的图片，再将导入后的模块作为props传递给子组件：

// 父组件中导入图片
import card1 from "./card-1.png";

// 传递导入后的模块
<Card img={card1} />

// Card组件直接使用传入的资源
function Card(props){
   return(
       <img src={props.img} alt="card1" />
   )
}

方案2：使用require.context批量导入图片

如果需要加载目录下的多张图片，可以用require.context创建资源上下文，实现动态匹配：

// 创建图片上下文，参数分别为：资源目录、是否递归子目录、文件名正则
const imagesContext = require.context("./images", false, /\.png$/);

// Card组件通过图片名称动态获取资源
function Card(props){
   return(
       <img src={imagesContext(`./${props.img}`)} alt="card1" />
   )
}

// 使用组件时传递图片文件名
<Card img="card-1.png" />

方案3：将图片放入public目录使用绝对路径

把图片放到项目的public目录下，直接使用绝对路径字符串传递：

// 父组件传递public目录下的图片路径
<Card img="/card-1.png" />

// Card组件直接使用路径
function Card(props){
   return(
       <img src={props.img} alt="card1" />
   )
}

这种方式下，打包工具不会处理public目录中的资源，图片会保持原路径直接部署。

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