json - 如何在 jsx 中映射具有图像和文本信息的 json 字符串

Question

我有一个包含对象数组的 json 文件，例如：

[
    { 
      "id": 1,
      "title": "first title",
      "description":"first descript",
      "image":"/assets/Images/myimage-1.jpg"
    },
 { 
      "id": 2,
      "title": "second title",
      "description":"second descript",
      "image":"/assets/Images/second.jpg"
    },
   
  ]

我在 jsx 中有以下功能

export default function myfunc({task}) {
    return (
        <ul>
            {tasks.map(task => <div key={task.id} >{task.title}{task.description}</div> )} ; 
            {tasks.map(task => <img src={task.image} key={task.id}></img> )}  

        </ul>
    )
}

执行时首先解析文本内容，然后解析图像内容，由于需要 img 标签，我怎样才能使它使用地图一次性解析图像源和文本？同时能够为他们分配课程？

我从几年前发现了一个类似的问题，但那个问题也没有答案。从 json 反应动态映射图像路径

标签： jsonreactjs

Answer 1

干得好

首先，我创建了一个 js 文件，它映射了我想要使用的所有图像文件，比如

export default {
  "1.png": require("./1.png"),
  "2.png": require("./2.png")
};

然后，下一步，我已经导入了映射文件并稍微更改了 json

import images from "./assets"; // <----- imported

const tasks = [
  {
    id: 1,
    title: "first title",
    description: "first descript",
    image: "1.png" // <------- changed here
  },
  {
    id: 2,
    title: "second title",
    description: "second descript",
    image: "2.png" // <------- changed here
  }
];

最后一步：

{tasks.map(task => (
    <img alt="" width="250" 
         src={images[task.image]} // <----- HERE
         key={task.id} />

))}

工作演示：