score:3

Accepted answer 
        import { useEffect, useState, useRef } from "react";
        import "./styles.css";

        export default function App() {
          const [loading, setLoading] = useState(true);
          const imageRef = useRef();
          useEffect(() => {
            if (loading === true) {
              setTimeout(() => {
                if (loading === true) {
                  setLoading(false);
                }
              }, 1000);
            }
          }, [loading, setLoading]);
          useEffect(() => {
            if (loading === true) {
              imageRef.current.src =
                "https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif";
            } else {
              imageRef.current.src =
                "https://post.healthline.com/wp-content/uploads/2020/08/3180-Pug_green_grass-732x549-thumbnail-732x549.jpg";
            }
          }, [loading, imageRef]);
          return (
            <div className="App">
              <img ref={imageRef} alt="okay" />
            </div>
          );
        }

score:0 

return (
    {"your true/false condition" ? <img src={image1}/> : <img src={image2}/>}
)

score:1 

import {useState} from 'react';

const [source,setSource] = useState("");

 if(reasultl === 'true'){
    setSource(igo}
   }else{
    setSource(placeholder)
   }

<img id="indigo" src={source} height="134" width="130" />

Related Query

More Query from same tag