score:1

Accepted answer

generally, how you load images in react is to import the image from the specified folder (webpack converts it into the correct source behind the scenes), and then to use that imported variable as the src of the image.

import imgsource from "../../assets/images/imagename.jpg";

const collectionitem = ({ item }) => (
    <div classname='collection-item'>
        <div
            classname='image'
            style={{
                backgroundimage: `url(${imgsource})`
            }} />
        </div>
    </div>
)

edit in the cases where the import depends upon the props, you could simple dynamically import the image within the function itself:

const collectionitem = ({ item }) => (
    import imgsource from `${item.imageurl}`;
    <div classname='collection-item'>
        <div
            classname='image'
            style={{
                backgroundimage: `url(${imgsource})`
            }} />
        </div>
    </div>
)

in the case that it does not work, you can try using require instead

const imgsource = require(item.imageurl);

Related Query

More Query from same tag