开发者问题收集

如何在 React.js 应用程序中显示来自 json 文件的图像?

2021-05-17
116

我正在用 React.js 开发一个小网站/作品集,在显示存储在 json 文件中的图像时遇到了一些问题。

控制台显示了文件,但我们无法在浏览器中看到图像! 有人可以帮我一下吗?

这是我的 json 文件:

export const GaleriesData = [
  {
    id: 1,
    tableaux: [
      “../assets/img/galeries/aformaimediata/aformaimediata1.jpg”,
    ...
      “../assets/img/galeries/aformaimediata/aformaimediata8.jpg”,
    ],
  },
  {
    id: 2,
    tableaux: [
      “../assets/img/galeries/espiritoarte/espiritoarte1.jpg”,
     ...
      “../assets/img/galeries/espiritoarte/espiritoarte10.jpg”,
    ],
  },
];

这是我的组件:

import React, { useState } from ‘react’;
import FbImageGrid from ‘react-facebook-photo-grid’;
import { GaleriesData } from ‘../data/galeriesData.js’

const Galerie = (props) => {
    const [currentGalerie] = useState(GaleriesData);
    const galerie = currentGalerie[props.galerieNumber].tableaux;
    return (
        <div>
        <FbImageGrid images={galerie} maxWidth={800}  />
        </div>
    )
}
export default Galerie
1个回答

由于 50 声望的问题,我无法发表评论。但您知道图片的导入(例如 ../assets/img/galeries/aformaimediata/aformaimediata1.jpg )是相对于 JSON 文件的位置,而不是 React 组件的位置吗?

Muhammad Radwan
2021-05-17