Question

是的，这个问题可能与其他问题重复，但是我找不到解决该问题的方法。

我创造了一些简单的东西

1个读取json并加载图片的组件。

json

{
  "images": [
    {
      "id": 1,
      "url": "../assets/images/slider/croissant-other.jpg",
      "description": "Croissant"
    },
    {
      "id": 2,
      "url": "../assets/images/slider/croissant-3570.jpg",
      "description": "Croissant 3570"
    }
  ]
}

组件

import React from "react";
import jsonCarrousel from "../data/carrousel.json";

function Carrousel() {
  return (
    <div>
      {jsonCarrousel.images.map((image, i) => (
        <div className="item" key={i}>
          <img src={require(`${image.url}`)} alt={image.description} key={i} />
        </div>
      ))}
    </div>
  );
}

export default Carrousel;

实时示例

https://codesandbox.io/s/stupefied-fast-1zfdj

错误：

/src/assets/images/slider/croissant-other.jpg hasn't been transpiled yet.

Answer 1

已编译的代码将调查/public来查找您的图像。您应将assets移至/public而不是src。（手动或通过捆绑工具）

此外，图片来源应为src={`${image.url}`}

https://codesandbox.io/embed/elastic-solomon-1ul1o

Answer 2

 {
  "images": [
    {
      "id": 1,
      "url": "https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg",
      "description": "Croissant"
    },
    {
      "id": 2,
      "url": "https://www.belightsoft.com/products/imagetricks/img/core-image-filters@2x.jpg",
      "description": "Croissant 3570"
    }
  ]
}

代码已更改

function Carrousel() {
  return (
    <div>
      {jsonCarrousel.images.map((image, i) => (
        <div className="item" key={i}>
          <img src={image.url} alt={image.description} key={i} />
        </div>
      ))}
    </div>
  );
}

Answer 3

这是一个更具描述性的解决方案。

要从本地 JSON 文件动态加载图像，您需要将要在 JSON 文件中使用的图像放入公共文件夹的文件夹中（您可以随意命名）。例如。 public/images/imgage.png.

然后您可以使用以下命令对其进行渲染：你可以像这样在你的 JSON 中导入它：

{
  "images": [
    {
      "id": 1,
      "url": "/images/imgage.png"
    }
  ]
}

...
  <img src={require(`${image.url}`)} alt={image.description} key={i} />
...

create-react-app 默认有一个公共文件夹。

文件夹结构如下所示：

└───public
│   └───images
│       │   image.png
│   
└───src
    │   yourfiles.js

或者，您可以导入 src 文件夹中的图像，直接在 react 组件中进行渲染：

import img from "./imgage.png";

const component = () => <img src={img} />

反应，从json加载本地图像

3 个答案: