javascript - 使用 Map 在 React 中渲染图像

Question

我正在开发一个 React 项目，该项目在一个名为 data.js 的文件中包含所有数据。文件内是一个数组，里面有几个对象。在一个单独的文件调用 SuppList.js 中，我使用 map 方法循环遍历数组并显示所有内容。我能够显示除数组中的图像之外的所有内容。

数据.js

const supps = [
    {id: 1, suppName: "Protein", purpose: "Muscle Building and Recovery", pic: "./images/protein.png" },
    {id: 2, suppName: "Creatine", purpose: "Muscle Building, Strength and Recovery", pic: "./images/creatine.png"},
    {id: 3, suppName: "Minerals", purpose: "Health & Recovery", pic: "./images/minerals.png"},
    {id: 4, suppName: "Vitamin", purpose: "Health and Fat Loss", pic: "./images/vitamins.png" },
    {id: 5, suppName: "Fat-Loss", purpose: "Weight Loss & Recovery", pic: "./images/fat-loss.png" },
    {id: 6, suppName: "Pre-Workout", purpose: "Strength & Stamina", pic: "./images/pre-workout.png" },
]

export default supps;

补充列表.js

import elements from './data'

const SuppList = () => {
    return (
        <div>
            {elements.map((element) => (
                <div>
                <h3>{element.suppName}</h3>
                <p>{element.purpose}</p>
                <img src={element.pic} alt={element.id}/>
                </div>
                ))}
        </div>
    )
}
   
export default SuppList;

标签： javascriptreactjsfrontend

Answer 1

您可以使用require.

像这样的东西-

const supps = [
  {
    ...
    pic: require("./images/protein.png"),
    ...
  },
]

然后你可以在 map 函数中调用它：

<img src={element.pic} alt={element.id}/>