React中从列表引入图片失败：动态require路径失效问题求助

我在React组件里尝试用列表中的图片路径作为Card.Img的图片源，但src设置无效。不过Button里显示的{images[idx]}路径是正确的，直接把列表里的具体路径写进src就能正常显示。

代码如下：

import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';

const ProductComponent = ({ category, idx }) =>{
  const images = [
    './unisex-heavy-blend-hoodie-black-zoomed-in-2-638cce72d61d2.png',
    './unisex-staple-t-shirt-silver-front-638ca71569cc4.png',
    './unisex-staple-t-shirt-black-heather-zoomed-in-638ca1af35d94.png'
  ]
  return (
    <Card style={{ width: '25rem' }}>
      <Card.Img variant="top"  src={require(images[idx])} />
      <Card.Body>
        <Card.Title>{category}</Card.Title>
        <Button variant="primary">{images[idx]}</Button>
      </Card.Body>
    </Card>
  );
}

export default ProductComponent;

问题原因 #

Webpack这类React项目常用的打包工具，在处理require加载资源时，需要编译阶段就能确定具体的文件路径，这样才能提前定位并打包对应的图片资源。你现在用require(images[idx])是动态传入变量，Webpack无法在编译时预判到要加载的具体文件，因此无法正确解析图片资源，最终导致图片加载失败。而Button里只是渲染字符串路径，不需要Webpack处理资源打包，所以能正常显示。

解决方法 #

方法1：提前用require处理所有图片路径 #

把列表里的路径直接通过require预加载，让Webpack在编译阶段就打包这些图片：

const images = [
  require('./unisex-heavy-blend-hoodie-black-zoomed-in-2-638cce72d61d2.png'),
  require('./unisex-staple-t-shirt-silver-front-638ca71569cc4.png'),
  require('./unisex-staple-t-shirt-black-heather-zoomed-in-638ca1af35d94.png')
]

之后直接使用即可：

<Card.Img variant="top" src={images[idx]} />

方法2：用import提前导入图片 #

也可以通过import语句逐一导入图片，再存入列表：

import img1 from './unisex-heavy-blend-hoodie-black-zoomed-in-2-638cce72d61d2.png';
import img2 from './unisex-staple-t-shirt-silver-front-638ca71569cc4.png';
import img3 from './unisex-staple-t-shirt-black-heather-zoomed-in-638ca1af35d94.png';

const images = [img1, img2, img3];

使用方式和上面一致，直接src={images[idx]}。

方法3：将图片放入public目录 #

如果把图片放在React项目的public文件夹下，就可以直接使用绝对/相对路径，不需要require或import：

const images = [
  '/unisex-heavy-blend-hoodie-black-zoomed-in-2-638cce72d61d2.png',
  '/unisex-staple-t-shirt-silver-front-638ca71569cc4.png',
  '/unisex-staple-t-shirt-black-heather-zoomed-in-638ca1af35d94.png'
]

然后直接赋值给src：

<Card.Img variant="top" src={images[idx]} />

这种方式下，Webpack不会处理这些图片，它们会被直接复制到构建后的public目录中。

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