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

Question

I am creating an App store where I bring all the information and icon image from a json.data file. Some of the apps don't have images. So, my question is: How can I add a default image where there is no in the file? This is what my code looks like:

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

You can check with the ternary operator.

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

There are couple of ways I can think of:

Method 1: Just use ternary operator to the src to check if a particular url exist

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

Method 2: Conditional rendering elements.

Similar to the ternary operator but not do not check inside the src . Just try to render a new image with a default source value. See https://reactjs.org/docs/conditional-rendering.html

Method 3: Adjust your json file so all apps contain an image url. For the apps that are not supposed to have any image you can just set a default image URL. Therefore, no changes in your code!

You can also do this in your code before rendering the image. You can check again if the app contain any url(simple if condition). If not, then you can just assing a default value (ie image url) to that app.