ReactJS中如何读取.js对象内的图片路径并显示图片

你遇到的图片加载失败问题，本质是React项目使用的打包工具（Webpack/Vite，CRA内置）不会自动识别JS对象中写死的相对路径字符串，打包后静态资源路径会发生变化，直接将字符串赋值给img标签的src属性会触发404错误。
以下是三种可直接落地的方案，根据你的项目场景选择即可： #

方案1：配置文件内静态引入图片（最推荐，适配所有React脚手架） #

这种方式打包工具会自动处理图片资源，自动做路径替换、资源哈希、压缩优化，不会出现路径错误。

• 首先修正你配置文件里的图片路径，统一以当前index.js文件为基准的相对路径，不要一会带./一会不带
• 在index.js顶部提前import所有用到的图片，将对象中的image字段替换为引入的图片变量

修改后的index.js代码示例：

// 引入所有图片资源，路径以当前index.js的位置为基准
import bamboozaArts from './images/bambooza_arts.png'
import ecoBag from './images/bag_2.png'
import bambooBox from './images/box_bamboo.png'
import bambooCup from './images/white_cup.png'
import recycledBinder from './images/binder_image.png'

export const dataList = [
  {
    category: "Arts",
    cuisine: "Bamboo",
    id: 1,
    title: "Bambooza - Bamboo Arts and Crafts",
    price: 499,
    image: bamboozaArts,
    rating: 5
  },
  {
    category: "Material",
    cuisine: "Bags",
    id: 2,
    title: "Recycled Eco-friendly Bag",
    price: 199,
    image: ecoBag,
    rating: 4
  },
  {
    category: "Material",
    cuisine: "Bamboo",
    id: 3,
    title: "Bambooza Box with Lock | Eco-friendly",
    price: 199,
    image: bambooBox,
    rating: 3
  },
  {
    category: "Material",
    cuisine: "Cups",
    id: 4,
    title: "Biodegradable Compostable White Cup | Craft Double Wall | Bamboo Fiber TravelMug",
    price: 99,
    image: bambooCup,
    rating: 5
  },
  {
    category: "Material",
    cuisine: "Recycled",
    id: 5,
    title: "Ecofriendly Chipboard Binders (3 unit) Recycled Binders",
    price: 129,
    image: recycledBinder,
    rating: 3
  },
];

组件中遍历渲染时直接取item.image赋值给src即可：

import { dataList } from './index.js'

export default function ProductList() {
  return (
    <div className="product-container">
      {dataList.map(product => (
        <div className="product-card" key={product.id}>
          <img src={product.image} alt={product.title} style={{width: '200px', height: '200px', objectFit: 'cover'}} />
          <h4>{product.title}</h4>
          <p>售价：¥{product.price}</p>
          <p>评分：{product.rating}星</p>
        </div>
      ))}
    </div>
  )
}

方案2：将图片放入public目录（适合不想逐个引入图片的场景） #

如果图片数量多，不想挨个写import，可以把静态资源放到public目录，走绝对路径引用：

• 把存放图片的images文件夹整体移动到项目根目录的public文件夹下
• 把dataList里所有image字段的路径统一改成以/开头的绝对路径，去掉所有./前缀，比如image: "/images/bambooza_arts.png"
• 渲染时直接使用路径字符串即可，不需要额外引入资源，打包时public目录下的文件会被原样复制到构建产物根目录

注意：这种方式打包工具不会对图片做压缩、哈希处理，缓存策略需要自己配置，适合大体积静态资源、不需要构建处理的图片。 #

方案3：动态引入（仅适配基于Webpack的老版CRA项目，Vite不推荐） #

如果不想改配置文件的路径，也不想移动图片位置，可以在渲染时用require动态加载资源，注意必须写死静态路径前缀，否则Webpack无法定位需要打包的资源：

<img 
  src={require(`./images/${product.image.replace('./images/', '').replace('images/', '')}`)} 
  alt={product.title}
/>

注意：你当前配置里的路径前缀不统一，用这个方法需要先把路径里的前缀统一处理掉，否则会出现部分图片加载失败。完全动态的require(product.image)写法是无效的，Webpack无法提前分析需要打包的文件。

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