动态设置Card.Img的src时出现Cannot find module错误求助

问题描述 #

上传图片后尝试动态展示，静态写死src={require('../../images/image.jpg')}功能正常，但用字符串拼接动态路径（如下两种方式）时，出现Uncaught Error: Cannot find module './image.png'错误：

方式一：

<Card.Img
  variant='left'
  src={require(`../../images/${image_url}`)}
  width='100px'
  style={{objectFit:"cover"}}
/>

方式二：

<Card.Img
  variant='left'
  src={require('../../images/'+ image_url)}
  width='100px'
  style={{objectFit:"cover"}}
/>

原因分析 #

webpack在编译阶段需要明确知道require的模块路径，才能提前将静态资源打包到项目中。动态拼接的路径（比如${image_url}）在编译时是不确定的，webpack无法提前定位到对应文件，导致运行时找不到模块。

解决方案 #

根据你的场景（上传图片后展示），优先推荐方案1，其他方案适用于项目静态图片的动态加载：

方案1：使用上传后返回的直接URL（用户上传场景） #

如果是用户上传的图片，上传成功后后端通常会返回该图片的在线访问URL（比如云存储地址或服务器静态文件地址），此时无需使用require，直接将URL赋值给src即可：

<Card.Img
  variant='left'
  src={image_url} // 这里image_url是上传后返回的在线URL
  width='100px'
  style={{objectFit:"cover"}}
/>

方案2：提前建立静态图片映射表（少量项目内图片） #

如果图片是项目内置的静态资源，可提前导入所有需要的图片，建立文件名到资源模块的映射：

// 先导入所有需要的图片
import dogImg from '../../images/dog.png';
import catImg from '../../images/cat.jpg';

// 建立映射关系
const imageMap = {
  'dog.png': dogImg,
  'cat.jpg': catImg
};

// 动态使用
<Card.Img
  variant='left'
  src={imageMap[image_url]} // image_url是文件名，比如'dog.png'
  width='100px'
  style={{objectFit:"cover"}}
/>

方案3：用webpack的require.context批量导入（大量项目内图片） #

如果项目内有大量静态图片需要动态加载，可通过require.context批量导入整个目录下的图片：

// 创建上下文，批量加载../../images下的png/jpg/svg文件
const imageContext = require.context('../../images', false, /\.(png|jpe?g|svg)$/);

// 根据文件名获取图片路径
const getImageSrc = (filename) => imageContext(`./${filename}`);

// 使用
<Card.Img
  variant='left'
  src={getImageSrc(image_url)} // image_url是文件名，比如'flower.png'
  width='100px'
  style={{objectFit:"cover"}}
/>

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