React项目从JSON读取的图片无法在网页显示仅展示文件名如何解决？

问题原因 #

你当前的代码存在3个核心问题导致图片无法正常渲染：

• 直接将图片文件名作为普通文本插入到<p>标签中，没有使用<img>标签加载图片资源，浏览器只会将文件名当做字符串展示
• filter方法的返回值不符合规范，filter要求返回布尔值来判断条目是否保留，原代码返回字符串或对象会导致过滤逻辑异常
• 除第一条数据外其余JSON条目没有image字段，没有做兼容处理容易出现渲染异常

修复方案 #

以下是修改后的完整代码：

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)}}
            />
            {IosAppName.filter(app_name => {
                // 修正filter返回逻辑，空搜索时不展示结果，也可按需求调整为返回true展示全部
                if(searchTerm === '') return false
                return app_name.appStore.toLowerCase().includes(searchTerm.toLowerCase())
            })
            .map((all_app_names) => {
                return <p key={all_app_names.appStore}>
                    {all_app_names.appStore}
                    {/* 仅当存在image字段时渲染图片，避免异常 */}
                    {all_app_names.image && <img 
                        // 此处路径根据你项目中图片的实际存放位置调整
                        src={`/images/${all_app_names.image}`}
                        alt={all_app_names.appStore}
                        // 可自行调整图片尺寸、边距等样式
                        style={{width: '24px', height: '24px', marginLeft: '10px', verticalAlign: 'middle'}}
                    />}
                </p>
            })}
        </div>
    );
}

export default Ios_search;

路径调整说明 #

请根据你项目中图片的实际存放位置调整img标签的src属性：

• 如果图片放在项目public目录下：直接填写从public目录出发的绝对路径即可，比如图片放在public根目录，src直接写/${all_app_names.image}
• 如果图片放在项目src/assets目录下：需要用require动态引入，src改为require(../assets/${all_app_names.image})（路径按实际层级调整）

内容的提问来源于stack exchange，提问作者Atharva