来自 json 文件的图像未显示在网站上

Posted 2023-02-22

【中文标题】来自 json 文件的图像未显示在网站上

【英文标题】：Image from json file is not displayed on the website

【发布时间】：2021-12-08 10:58:04

【问题描述】：

我想从 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

【参考方案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

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

【讨论】：

有没有办法从我的 src/image 文件夹中获取我的图像，因为当我在 json 文件中提供我的图像标签的路径时，它只显示一个默认的问号图像，但是当我提供json文件的网络图像地址，它可以工作，但它不适用于我的本地图像

嘿，有:)。但是您必须使用相对于 index.html 文件的直接路径。如果在您的根目录中，您有 index.html 和 src 文件夹，则路径将是 ./src/images/Image.jpg。这就是我通过调整 JSON 给定值的意思。但同样，确切的路径取决于您的文件目录结构。例如，要将该路径添加到 JSON 值，您可以简单地编写