React Bootstrap Image组件无法读取本地product.js中配置的图片路径问题

• 核心问题1：动态路径未被webpack解析
  直接写死src="../images/vibestick.jpg"时，webpack在编译阶段会识别静态路径，自动处理资源映射；但你把路径作为字符串存在product.js里、通过product.image动态传递时，webpack不会处理动态字符串的路径，导致最终路径解析错误。
  对应两种常用场景的解决方法：
  1. 图片存放在public/images目录下：直接修改product.js中image字段的值为绝对路径即可，示例：

     // product.js中对应字段配置
     {
       _id: 'xxx',
       name: 'vibestick',
       image: "/images/vibestick.jpg"
     }
     

  2. 图片存放在src/images目录下：需要在product.js中先导入对应图片资源，再赋值给image字段，示例：

     // product.js 文件顶部导入资源
     import vibestickImg from '../images/vibestick.jpg'
     // 对应商品对象配置
     const products = [
       {
         _id: 'xxx',
         name: 'vibestick',
         image: vibestickImg // 直接使用导入的资源变量，不要写字符串路径
       }
     ]
     

• 核心问题2：商品对象未正确匹配
  可以在代码中加入console.log(product)调试，确认products.find()是否返回了正确的商品对象：
  如果match.params.id是字符串类型，而product的_id是数字类型，全等判断===会返回false，导致product为undefined。可以将判断逻辑改为p._id == match.params.id做隐式类型转换，或者统一两边的类型后再判断。

内容的提问来源于stack exchange，提问作者Touhidul Islam Chayan