如何在React中显示以JSON格式保存的图像

mqxuamgl 于 2023-08-08 发布在 React

关注(0)|答案(1)|浏览(139)

我已经尝试了阳光下的一切，甚至浏览了很多关于堆栈溢出的解决方案，但无法找到解决问题的方法。由于这样或那样的原因，图像本身根本不想显示。其他一切都很好，除了图像。

<section className='profiles'>
    {
        profiles.map(data => <Person key={data.id} name={data.name} img={data.img} position={data.position} desc={data.desc} comittee={data.comittee} />)
    }
</section>

字符串
下面是json文件：

[
    {
        "id": 0,
        "comittee": false,
        "img": "require('@img/person1.jpg')",
        "desc": "Here's a short description about the person above and what they do and love not to do",
        "position": "member",
    },

    {
        "id": 1,
        "comittee": false,
        "img": "img/person2.jpg",
        "desc": "Here's a short description about the person above and what they do and love not to do",
        "position": "member",
    },
]

型

JSON

来源：https://stackoverflow.com/questions/76732439/how-to-display-images-saved-in-a-json-format-in-react

1条答案

按热度按时间

quhf5bfb1#

下面是一个从JSON显示图像的基本示例代码。

import React from 'react';

export default function App() {
  const people = [
    { name: 'Person 1', img: '/images/person1.svg' },
    { name: 'Person 2', img: '/images/person1.svg' },
  ];

  return (
    <>
      {people.map(({ name, img }) => (
        <Person key={name} name={name} img={img} />
      ))}
    </>
  );
}

function Person({ name, img }) {
  return (
    <div>
      <p>{name}</p>
      <img src={img} />
    </div>
  );
}

字符串
示例：-https://stackblitz.com/edit/react-vunpjf?file=src%2FApp.js

赞(0）回复(0）举报 2023-08-08

我来回答

如何在React中显示以JSON格式保存的图像

1条答案

相关问题

热门标签

最新问答