如何显示本地 Json 文件中的数据（图像）答案

【问题标题】：How to display data(images) from a local Json file如何显示本地 Json 文件中的数据（图像）
【发布时间】：2021-01-08 21:17:00
【问题描述】：

我是 React 的新手，我正在尝试弄清楚如何解析这个数据文件以创建许多以图像为背景并覆盖文本的 div。现在，我什至很难在页面上显示任何数据，而无需将 json 文件编辑为具有 export const = images 而不是当前的内容。我的示例代码中列出的图像与实际不同。任何帮助是极大的赞赏！谢谢！

images.json

{
  "images": [
    {
      "id": "1425ac9e-5718-4e2e-af43-132dcf58246b",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "thumb": "https://source.unsplash.com/user/erondu/1600x900.jpg",
      "title": "Lorem Ipsum",
      "subtitle": "sit amet"
    },
    {
      "id": "5427ake0-eb27-1bcb-84ds-d374e2098dd3",
      "description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
      "thumb": "https://source.unsplash.com/user/erondu/1600x900.jpg",
      "title": "Perspiciatis",
      "subtitle": "sed ut"
    },
    {
      "id": "23g8f61f-9heb-4d3b-a8e4-0b22c31deb0e",
      "description": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.",
      "thumb": "https://source.unsplash.com/user/erondu/1600x900.jpg",
      "title": "Nemo Enim Ipsam",
      "subtitle": "sit aspernatur"
    },
    {
      "id": "6419ac9e-5718-4eee-af53-1d20cf58146b",
      "description": "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.",
      "thumb": "https://source.unsplash.com/user/erondu/1600x900.jpg",
      "title": "At Vero Eos",
      "subtitle": "quos dolores"
    }
  ]
}

thumbs.js

import React from 'react';
import { images } from '../../data/images.json';

export const Thumbs = () => {
  return (
    <>
    <div className="thumb-container">
      {images.map((data, key) => {
        reutrn (
          <div key={key}>
            {data.thumb}
          </div>
        );
      })}
    </div>
    </>
  );
};

我还有一个呈现 .Thanks 的文件！

【问题讨论】：

你试过import data from '../../data/images.json' 吗？
是的，还是不行
命名导入适用于 Webpack 的 json 加载。你是用 Create React App 还是别的什么？
reutrn 应该是return

标签： javascript arrays json reactjs react-hooks

【解决方案1】：

您的return 拼写错误。这是我能在你的代码中找到的唯一错误，我在一个全新的 create-react-app 应用程序中运行它，它运行得很好。如果您没有使用最新版本的 Webpack，可能会出现问题，但它必须是一个相当旧的版本才能没有内置 json 加载。这是我修改后的代码，它只显示图像而不是它们的 URL：

export const Thumbs = () => (
  <div className="thumb-container">
    {images.map((img, i) => <img src={img.thumb} key={i} />)}
  </div>
)

【讨论】：