json文件中的图片没有在网站上显示

Question

我想从json中获取图像到javascript函数，但不是显示图像，而是显示图像文件的名称。下面是javascript函数

import React from "react";
import IosAppName from './appStoreData.json';
import './Ios_search.css';
import {useState} from 'react';
function Ios_search(){
const[searchTerm, setSearchTerm] = useState('')
return(
<div className='ios'>
<input type='text' placeholder='Search' onChange={event => {setSearchTerm(event.target.value)}}></input>
{IosAppName.filter(
app_name =>{
if(searchTerm == '') return ''
else if(app_name.appStore.toLowerCase().includes(searchTerm.toLowerCase())) return  app_name
}

)
.map((all_app_names) => {return <p>{all_app_names.appStore} {all_app_names.image}</p>})}
</div>
);
}
export default Ios_search;

这是虚拟数据👇

[

{"appStore":"Cardguard",
"image": "AS.jpg"},
{"appStore":"Temp"},
{"appStore":"Tempsoft"},
{"appStore":"Stim"},
{"appStore":"Tin"},
{"appStore":"Aerified"},
{"appStore":"Ventosanzap"},
]

这是搜索-时的样子Searchbar

Answer 1

要在网站中显示图像，您应该使用<img>标记。现在，{all_app_names.image}位于<p>标签内。这就是为什么它只显示文件名的原因。你可以把它重写为

.map((all_app_names) => {return <p>{all_app_names.appStore} <img src={all_app_names.image}/> </p>})}

然而，需要注意的是，图像标签中的src属性需要正确的直接路径值或直接链接。

如果直接路径值不正确，它将显示一个空的图像占位符。

根据所获取的图像的存储位置，您可能需要稍微调整一下数据库获取值。您可以在这里阅读更多关于img标签的内容:https://www.w3schools.com/tags/tag_img.asp

Answer 2

我也有这个问题，但能够通过将我的图像移动到公共文件夹并从那里获取它们来解决这个问题。这不仅更容易，而且还消除了复杂的文件路径层次结构。