来自 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

如果这有帮助，请告诉我:)！