score:3
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>
);
}
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>
);
}
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" />
Source: stackoverflow.com
Related Query
- How to use Refs to change image src in React js
- how to change image src using props with styled component and react
- How to use refs in React with Typescript
- How to give Image src dynamically in react js?
- How I can use refs to change styling class in ReactJS?
- How to use refs in react through react-redux , withRouter?
- How to use React refs to focus a Redux Form field?
- How to use React Native Animate to change view flex from 0 to 1
- How to use React Router with Material UI Drawer to change content on click?
- How to use Refs with Material-ui 4, React 16.8, TypeScript 3.5
- How to use browser back/forward buttons to navigate React state change history
- How to import svg files and use them for src in image
- React : how to load image outside src and public folders
- How to change image on button click with React Hooks?
- How to use refs in React Higher-Order Component (HOC)
- How to use function in callback of image onload event in react js?
- How to use React refs with new Typescript strictPropertyInitialization option?
- how to use button as link in material-ui react with out underline and change color text?
- How to use the imported image in React within a function inside a class?
- How Can I Change Next.Js Image Component src with animation?
- How to use onChange with react hook on react select to change data base on user select
- How Can I use the returned string (new feature of React v16.0.0) in the source tag of an image ex: <img src='returnedString' />?
- How can I use setInterval() to automatically change slides on this React Spring project
- How to change image and background color every x seconds. React
- How do I use the useState hook to change the color of my react icons to blue?
- React how to use refs to focus/blur?
- how to use image in react lazy fallback
- How to add listener on change Object which already defined with @observable decorator in MobX to use in React
- How to properly use refs in React functional components
- How to use template string to create link from props and render image in React component
More Query from same tag
- React forwordRef with state
- ReactJS re-render is not applied on CSS
- React Spring: dynamic values in useTransition() when using it alongside react-router
- NextJS - Unexpected token < in JSON at position 0
- My Axios call is returning a 404 error, React/Express
- How do I escape the color character (:) inside the path, with React-Router V4?
- How to fix react-dates SingleDatePicker invalid date?
- React state isn't being changed
- Axios Post Form with Reactjs
- how to hide play button until image loaded in javascript
- How to manage visibility of elements in a stepped form
- How to save and pass username and password when redirect in external link in react
- MUI React SSR issues
- why am i not getting the data from Rapidapi
- how sort columns in ascending and descending order?
- Next.js pages using Link module not loading files with CSS import
- How can I synchronize data from two different queries, where one is being transformed in useEffect?
- React-table - problem with rendering checkboxes on 'next' click
- How to uncheck all state selected rows key using onclick function Table - Ant Design
- Browser History not working when going back in react-router-dom
- JSDoc Tag Support for React HOC (Higher-Order Component)
- Injecting HTML code in React using Helmet
- React how to handle federated login redirects with private routes
- How to make palceholder to move to right of options after values got selected in react select package?
- Next.js using getServerSideProps how do i pass props from page to components?
- TS2339: Property 'tsReducer' does not exist on type 'DefaultRootState'
- Memory leak when submitting form
- × TypeError: Object(...) is not a function. Mern stack post request with fetch not working
- React - Axios promise pending value undefined
- How to handle multiple api request,to show loading indicator from one variable in redux store