当我无法从 json.data 文件中获取时如何添加默认图像？

Question

我正在创建一个 App 商店，我从 json.data 文件中获取所有信息和图标图像。有些应用程序没有图像。所以，我的问题是：如何在文件中没有默认图像的情况下添加默认图像？这是我的代码的样子：

import { useEffect } from "react";
import axios from "axios";

const AppCard = ({ app }) => {
    
    useEffect(() => {
    }, [app]);
  
    async function handleDownload() {
      const downloadApp = await axios.get(app.download_url1);
      console.log(downloadApp.data);
    }

    return (
        <div className='card'>
            <div className='icon'>
                <img src={app.icon_url}
                    onError={(e)=>{e.target.onerror = null; e.target.src="../images/noImage.jpeg"}}
                    alt={app.name} />
            </div>
            <span> {app.description} </span>
            <div className='card-footer'>
                <small> {app.version} </small>
                <BsDownload onClick={handleDownload}/>
            </div>
        </div>
    );
};

export default AppCard;```

Answer 1

你可以用三元运算符来检查。

import { useEffect } from "react";
import axios from "axios";
import noImage from "../images/noImage.jpeg"
const AppCard = ({ app }) => {
    
    useEffect(() => {
    }, [app]);
  
    async function handleDownload() {
      const downloadApp = await axios.get(app.download_url1);
      console.log(downloadApp.data);
    }

    return (
        <div className='card'>
            <div className='icon'>
                <img src={app.icon_url.length > 0 ? app.icon_url : noImage}
                    alt={app.name.length > 0 ? app.name : "Default Img"} />
            </div>
            <span> {app.description} </span>
            <div className='card-footer'>
                <small> {app.version} </small>
                <BsDownload onClick={handleDownload}/>
            </div>
        </div>
    );
};

export default AppCard;

Answer 2

我可以想到以下几种方法：

方法 1: 只需对 src 使用三元运算符来检查特定的 url 是否存在

<img src={app && app.icon_url ? app.icon_url : defaultImage} alt={app.name}/>

方法二：条件渲染元素

类似于三元运算符但不是不检查src。只需尝试使用默认源值渲染新图像。参见 https://reactjs.org/docs/conditional-rendering.html

方法 3： 调整您的 json 文件，使所有 apps 包含图像 url。对于不应该有任何图像的应用程序，您可以设置默认图像 URL。因此，您的代码无需更改！

您也可以在渲染图像之前在代码中执行此操作。您可以再次检查该应用程序是否包含任何 url（简单的 if 条件）。如果没有，那么您可以为该应用程序分配一个默认值（即图像 url）。

当我无法从 json.data 文件中获取时如何添加默认图像？

How to add a default image when I can't get from the json.data file?

reactjs

react-hooks