React不导入本地图片直接加载方法及显示问题解决

当本地图片数量太多，或是从数据库拿到存储在src目录外的public文件夹下/images目录的图片路径时，没法逐个导入来动态获取图片，想问有没有不用导入就能加载这类图片的办法。

当前尝试内容 #

1. 文件结构 #

图片位于src外的public文件夹下的/images目录

2. 尝试代码 #

const path = "../images/"+ image_path ;

const Product = ({ item }) => {
  const src = `"/images/${item.img}`;

  return (
    <Container>
      <Circle />
      <Image src={src} />
      ...
    </Container>
  );
};

解决方案 #

你当前的写法有两个问题：

• 路径里多了多余的引号，src变量里的"会让路径变成字符串字面量的一部分，浏览器识别不了正确路径
• public是静态资源根目录，直接用/images/xxx作为路径就行，不用加相对路径前缀

修正后的代码：

const Product = ({ item }) => {
  const src = `/images/${item.img}`;

  return (
    <Container>
      <Circle />
      <Image src={src} />
      ...
    </Container>
  );
};

在React项目里，public文件夹是专门放静态资源的，构建项目时里面的文件会直接搬到输出目录的根目录。所以访问这里面的图片，直接用根路径（以/开头）指向对应的文件即可，不需要通过import导入，也不用写相对路径。只要item.img是正确的图片文件名（比如shirt.png），/images/${item.img}就能精准找到public/images下的那张图。

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