React项目中<img>标签无法显示商品图片的问题求助

问题根源 #

1. products文件导入路径错误：你的Home.js里错误地从../images/products导入products数组，但实际product.js位于src目录下，而非src/images。
2. 图片引用方式错误：React项目中，直接使用字符串路径（如"img1.png"）无法正确解析src/images目录下的图片，因为打包工具会对资源路径进行处理，只有通过导入或正确的动态引用才能获取到正确的资源URL。

解决方案 #

步骤1：修正products导入路径 #

打开Home.js，将导入products的代码修改为：

import products from '../product.js'

（因为Home.js在src/views目录，product.js在src根目录，相对路径为../product.js）

步骤2：正确引用产品图片 #

提供两种可行的方法：

方法一：在product.js中直接导入图片

修改product.js，逐个导入对应图片并赋值给img字段：

import img1 from './images/img1.png';
import img2 from './images/img2.png';
import img3 from './images/img3.png';
import img4 from './images/img4.png';

const products = [
    {
        id:0,
        name:"Đậu phộng tỏi ớt nhỏ (250g)",
        price: 35,
        img: img1
    },
    {
        id:1,
        name:"Đậu phộng tỏi ớt lớn (500g)",
        price: 70,
        img: img2
    },
    {
        id:2,
        name:"Bột ngũ cốc nhỏ (500g)",
        price: 35,
        img: img3
    },
    {
        id:3,
        name:"Bột ngũ cốc lớn (1kg)",
        price: 70,
        img: img4
    }
]
export default products

之后Home.js中的<img src={item.img} />就能正常显示图片。

方法二：在Home.js中动态加载图片

如果不想逐个导入图片，可以在Home.js的img标签中使用require动态获取图片路径：

<img src={require(`../images/${item.img}`).default} alt={item.name} />

（添加alt属性是良好的前端实践，提升可访问性）

额外检查点 #

• 确认src/images目录下的图片文件名与product.js中的完全一致（注意大小写，GitHub Pages运行在Linux环境，大小写敏感）。
• 确保图片文件没有损坏，格式正确。

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