Breaking News: Grepper is joining You.com. Read the official announcement!

how to put dynamic image in react

Add Answer

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

answer how to put dynamic image in react

related How to give Image src dynamically in react js?

related how to import images dynamically in react

related how to put dynamic image in react

related How to give Image src dynamically in react js?

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 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 give Image src dynamically in react js?

Comment

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

Popularity 9/10 Helpfulness 5/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 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 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

Link to this answer
Share Copy Link

Contributed on Apr 10 2022

Faithful Fish

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 2/10 Language javascript

Source: stackoverflow.com

Tags: image javascript javascr

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 give Image src dynamically in react js?

how to import images dynamically in react

how to put dynamic image in 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.