score:3

Accepted answer

first create ref for image tag using this way

in class component

const imagref=react.createref();

in functional component

const imageref=useref();

assign it to image tabg like this

<img src={igo} ref={imageref} />

and use imageref to change the src like this

       if(reasultl === 'true'){
             imageref.current.src = {igo}
       }
       else{
          imageref.current.src = {placeholder}
     }

however i this can be done without refs,as shown in armans's answer. lets do this with state in functional component

        import { useeffect, usestate } from "react";
        import "./styles.css";

        export default function app() {
        const [loading, setloading] = usestate(true);
        const [image, setimage] = usestate(
          "https://c.tenor.com/i6kn-6x7nhaaaaaj/loading-buffering.gif"
        );
        useeffect(() => {
          if (loading === true) {
            settimeout(() => {
              if (loading === true) {
                setloading(false);
                setimage(
                  "https://post.healthline.com/wp-content/uploads/2020/08/3180-pug_green_grass-732x549-thumbnail-732x549.jpg"
                );
              }
            }, 1000);
          }
        }, [loading, setloading, setimage]);

        return (
          <div classname="app">
            <img src={image} alt="okay" />
          </div>
        );
        }

try here in sandbox

now do the same using refs

        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>
          );
        }

try it in sandbox

hope this will help.

score:0

import your images at the top

import image1 from "../your image path/mountain.jpg"
import image2 from "./images/lake.png"

then use the images as variables by adding them to a usestate() like arman said,or coditionaly render the proper image in return()

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

dont put the images in public but in src

score:1

instead of changing the source attribute this way you can use react hook's usestate. e.g

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