как отобразить в 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, как я могу сделать так, чтобы он анализировал источник изображения и текст в одном go с использованием карты? имея возможность назначать им классы?

я нашел аналогичный вопрос из go, но и на этот вопрос нет ответа. React Dynami c отображение путей изображения из json

Answer 1

Здесь вы go

Сначала я создал один 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} />

))}

РАБОЧАЯ ДЕМО:

Редактировать # SO-image-mapping