how to put dynamic image in react

Add Answer

Faithful Fish answered on April 10, 2022 Popularity 9/10 Helpfulness 2/10

answer how to put dynamic image in react

related how to import images dynamically in react

related How to give Image src dynamically in react js?

related how to put dynamic image in react

related import image dynamically react

related How to give Image src dynamically in react js?

how to put dynamic image in react

Comment

// MyComponent.js
import images from './images'

//...snip

{ images.map(({id, src, title, description}) => <img key={id} src={src} title={title} alt={description} />)

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: dynamic image javascript put

Link to this answer
Share Copy Link

Contributed on Apr 10 2022

Faithful Fish

0 Answers Avg Quality 2/10

Closely Related Answers

how to import images dynamically in react

Comment

import { useEffect, useState } from 'react'

const useImage = (fileName) => {
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(null)
    const [image, setImage] = useState(null)

    useEffect(() => {
        const fetchImage = async () => {
            try {
                const response = await import(`../assets/img/${fileName}`) // change relative path to suit your needs
                setImage(response.default)
            } catch (err) {
                setError(err)
            } finally {
                setLoading(false)
            }
        }

        fetchImage()
    }, [fileName])

    return {
        loading,
        error,
        image,
    }
}

export default useImage

/////////////////////////////////////////////////////
import useImage from '../../hooks/useImage'

import Typography from './Typography' // simple plain-text react component

const Image = ({ fileName, alt, className, ...rest }) => {
    const { loading, error, image } = useImage(fileName)

    if (error) return <Typography>{alt}</Typography>

    return (
        <>
            {loading ? (
                <Typography>loading</Typography>
            ) : (
                <img
                    className={`Image${
                        className
                            ? className.padStart(className.length + 1)
                            : ''
                    }`}
                    src={image}
                    alt={alt}
                    {...rest}
                />
            )}
        </>
    )
}

export default Image

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: import im

Link to this answer
Share Copy Link

Contributed on Nov 24 2022

Curious Tom

0 Answers Avg Quality 2/10

How to give Image src dynamically in react js?

Comment

<img src={require('../img/nokia.jpg')}/>

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: image imag

Link to this answer
Share Copy Link

Contributed on Sep 15 2022

Samyak Khatua

0 Answers Avg Quality 2/10

how to put dynamic image in react

Comment

const images = [
  { id: 1, src: './assets/image01.jpg', title: 'foo', description: 'bar' },
  { id: 2, src: './assets/image02.jpg', title: 'foo', description: 'bar' },
  { id: 3, src: './assets/image03.jpg', title: 'foo', description: 'bar' },
  { id: 4, src: './assets/image04.jpg', title: 'foo', description: 'bar' },
  { id: 5, src: './assets/image05.jpg', title: 'foo', description: 'bar' },
  ...etc
];
export default images;

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: dynamic

Link to this answer
Share Copy Link

Contributed on Apr 10 2022

Faithful Fish

0 Answers Avg Quality 2/10

import image dynamically react

Comment

//img folder to import
const images = require.context('../../public/images', true);
//just change the variable to make it dynamic
var photo = "user.png"


<img src={images(`./${photo}`)} class="" width="50" height="50"/>

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: image import javascript

Link to this answer
Share Copy Link

Contributed on May 11 2024

NIP

0 Answers Avg Quality 2/10

How to give Image src dynamically in react js?

Comment

-1

<img src={require('../img/nokia.jpg')}/>

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: image imag

Link to this answer
Share Copy Link

Contributed on Sep 15 2022

Samyak Khatua

0 Answers Avg Quality 2/10

how to put dynamic image in react

Contents

More Related Answers

how to put dynamic image in react

Closely Related Answers

how to import images dynamically in react

How to give Image src dynamically in react js?

how to put dynamic image in react

import image dynamically react

How to give Image src dynamically in react js?

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.