CODEWITHSUNDEEP
reactjs
jay
jay

Reputation: 338

How to use Refs to change image src in React js

I'm trying to change an image src using refs instead of document.querySelector, But i can't figure out how to go about it and can't find a tutorial/documentation for it.

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

                          let img = document.querySelector('indigo');
                          if(reasultl === 'true'){
                          
                          img.src = {igo}
                        }
                         else{
                          img.src = {placeholder}
                         }

Thanks

Upvotes: 4

Views: 19463

Answers (3)

Jatin Parmar
Jatin Parmar

Reputation: 2910

First, create ref for image tag using this way

  • in class component:

    const imagRef=React.createRef();

  • in functional component:

    const imageRef=useRef();

Then, assign it to image tab like this

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

After that, use imageRef to change the src like this:

imageRef.current.src = result === 'true' ? {igo} : {placeholder}

However i this can be done without refs, as shown in armans's answer.

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) {
        setTimeout(() => {
            if (loading) {
                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

Finally, 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) {
            setTimeout(() => {
                if (loading) {
                    setLoading(false);
                }
            }, 1000);
        }
    }, [loading, setLoading]);

    useEffect(() => {
    imageRef.current.src = loading ?
        "https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" :
        "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!

Upvotes: 7

Arman viruse
Arman viruse

Reputation: 19

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" />

Upvotes: 1

codmitu
codmitu

Reputation: 709

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

Upvotes: 0

Related Questions