如何在 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