How to dynamically require images in React (using GET request to fetch images)

I have a profile picture for each user.

I fetch these pictures paths from my database column.

paths

Then store them in state.

state

const PROFILE_INFO = this.state.PROFILE_INFO; <img src=require(PROFILE_INFO.ImageURL) /> // ImageURL /stored_images/b234afaf-ccea-599f-9b3b-3cbf2d669b21.jpg

The problem is this doesn't work because require() only accepts STATIC paths.

require()

STATIC

enter image description here

This happens when i use

<img src=../..$PROFILE_INFO.ImageURL />

<img src=

/>

No, it happens when you use require with something that isn't a string that can be resolved for bundling purposes. You can't use require(someVariable) with webpack, because someVariable could be anything and so webpack can't pack that and errors out. With that said, it looks like you already have the URL as PROFILE_INFO.ImageURL so why not just use that directly? (also, on a JS naming convention, constants are all caps, classes start with a capital letter, functions/vars start with lowercase. Always good to follow that convention)

– Mike 'Pomax' Kamermans
Sep 8 '18 at 16:13

require

require(someVariable)

someVariable

PROFILE_INFO.ImageURL

I can't use it DIRECTLY because its A STATIC url.. its a unique image name for each profile.

– Sharl Sherif
Sep 8 '18 at 16:38

Okay but why are you using require then? Because that's the node.js instruction for loading a node module/package. If it's just a string, don't use require, as per charlietfl's answer. Using require is absolutely not how you load an image into a react app. If your JSX is for DOM/HTML target, template the src attribute as a string. The end. Don't ever bundle those in, that would be insane. You'd have to rebuild the entire app bundle every time you updated an image source. That'd be beyond crazy.

– Mike 'Pomax' Kamermans
Sep 8 '18 at 23:16

require

src

Trying to insert images with just strings DOES NOT work. i get a broken-image-icon

– Sharl Sherif
Sep 9 '18 at 11:31

cool: and what error do you get? Open dev tools, look at the console, look at the network tab, and determine where in your string you had your typo(s). "It does not work" is not a problem: it always works, exactly the way it should. You're seeing "it does not do what I expected", so apply standard procedure and determine what it does, so that you have the information you need to determine how to fix it.

– Mike 'Pomax' Kamermans
Sep 10 '18 at 3:40

1 Answer
1

You don't need require(). All you should need is the url string

require()

<img src=PROFILE_INFO.ImageURL />

In React that's the way you insert images.

– Sharl Sherif
Sep 8 '18 at 15:27

And i tried it doesn't work.

– Sharl Sherif
Sep 8 '18 at 15:28

define "doesn't work". Are images on same domain as page? What do you see in browser dev tools network?

– charlietfl
Sep 8 '18 at 15:33

Images are physically stored in a folder located very closely. i edited the post for what happens when using your solution.

– Sharl Sherif
Sep 8 '18 at 15:35

if i use ../../stored_images/b234afaf-ccea-599f-9b3b-3cbf2d669b21.jpg in src it works while thats literally whats stored in my object PROFILE_DETAILS. It's a common problem but i cannot find any solutions what so ever.

– Sharl Sherif
Sep 8 '18 at 15:37

../../stored_images/b234afaf-ccea-599f-9b3b-3cbf2d669b21.jpg

src

object

PROFILE_DETAILS

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt