如何从JSON文件提取文件夹图片URL到.js？图片映射失败求助

问题场景 #

在React项目中尝试从JSON文件提取本地图片URL，通过组件映射渲染，但图片无法正常显示。相关代码如下：

Lenses.js #

import lenses from './lens.json'
const Lenses = (props) => {
  
  return (
    <>
    <div className="lensescon">
    {lenses.map((lens) => (
      
      <Lenspro heading={lens.heading} price={lens.price} para="Ideal for everyday use" img={lens.img}/>
                  ))}
        
    </div>
    </>
  )
}

lens.json #

[
    {
      "heading": "Lens#1",
      "price": "5",
      "img": "./lens/lens1.jpg"
    },
    {
      "heading": "Lens#2",
      "price": "3",
      "img": "./lens/lens2.jpg"
    }
]

问题排查点 #

1. React静态资源处理机制限制
   React（尤其是基于Create React App的项目）不会直接识别字符串形式的相对路径作为图片资源。webpack打包时，只有通过import或require引入的资源才会被正确解析为打包后的路径，直接使用JSON中的字符串路径，浏览器会将其当作普通URL请求，大概率找不到对应资源。

2. 组件props渲染逻辑问题
   需确认Lenspro组件内部是否正确将img props赋值给<img>标签的src属性，若组件未正确处理该props，也会导致图片不显示。

3. 文件相对路径错误
   检查./lens/lens1.jpg这类路径是否与Lenses.js的实际位置匹配。比如若Lenses.js在src/components目录下，而图片在src/lens目录下，正确路径应为../lens/lens1.jpg，路径层级错误会导致资源找不到。

解决方案 #

方案一：JSON存文件名，组件内动态引入 #

修改lens.json，仅存储图片文件名：

[
    {
      "heading": "Lens#1",
      "price": "5",
      "img": "lens1.jpg"
    },
    {
      "heading": "Lens#2",
      "price": "3",
      "img": "lens2.jpg"
    }
]

在Lenses.js中用require动态引入图片，同时添加key避免React警告：

import lenses from './lens.json'
const Lenses = (props) => {
  
  return (
    <>
    <div className="lensescon">
    {lenses.map((lens, index) => (
      <Lenspro 
        key={index}
        heading={lens.heading} 
        price={lens.price} 
        para="Ideal for everyday use" 
        img={require(`./lens/${lens.img}`).default} 
      />
    ))}
    </div>
    </>
  )
}

方案二：提前导入图片再关联JSON数据 #

先在组件中导入所有需要的图片，再和JSON数据匹配：

// 导入所有目标图片
import lens1 from './lens/lens1.jpg'
import lens2 from './lens/lens2.jpg'
import lenses from './lens.json'

// 为JSON数据匹配对应的图片资源
const lensesWithImgs = lenses.map(lens => {
  return {
    ...lens,
    img: lens.img === './lens/lens1.jpg' ? lens1 : lens2
  }
})

const Lenses = (props) => {
  
  return (
    <>
    <div className="lensescon">
    {lensesWithImgs.map((lens, index) => (
      <Lenspro 
        key={index}
        heading={lens.heading} 
        price={lens.price} 
        para="Ideal for everyday use" 
        img={lens.img} 
      />
    ))}
    </div>
    </>
  )
}

方案三：将图片放入public文件夹，使用绝对路径 #

把图片放到项目根目录的public/lens文件夹下，修改lens.json的路径为绝对路径：

[
    {
      "heading": "Lens#1",
      "price": "5",
      "img": "/lens/lens1.jpg"
    },
    {
      "heading": "Lens#2",
      "price": "3",
      "img": "/lens/lens2.jpg"
    }
]

此时Lenses.js无需修改，只要Lenspro组件正确渲染img props即可，示例Lenspro组件实现：

const Lenspro = ({ heading, price, para, img }) => {
  return (
    <div className="lens-item">
      <h3>{heading}</h3>
      <p>{para}</p>
      <span>${price}</span>
      <img src={img} alt={heading} />
    </div>
  )
}

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