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>})}

但是，需要注意的是，image标记中的src属性需要正确的直接路径值或直接链接。

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

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

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