0

I'm using a React plugin that processes all of my images, and it allows for two types of loading data.

// Approach 1 - working
<img src={require('./images/my-image.jpg')} />

// Approach 2 - working
import MyImage from './images/my-image.jpg';

<img src={MyImage} />

Both approaches work fine, but the problem I'm facing is:

  • I'm getting my images in a response,
  • they're stored on separate server.

I've tried hardcoding to see if remote server would work and it does not:

// Approach 1 - ModuleNotFoundError: Module not found: Error: Can't resolve url
<img src={require('http://example.com/images/my-image.jpg')} />

// Approach 2 - ModuleNotFoundError: Module not found: Error: Can't resolve url
import MyImage from 'http://example.com/images/my-image.jpg';

<img src={MyImage} />

How do I tackle this? Can I even require('http://absolute-address.domain')? Don't really know where to look for require documentation when it comes to React, can't find it anywhere in the docs.

Damian Dziaduch
  • 2,107
  • 1
  • 15
  • 16
Wordpressor
  • 7,173
  • 23
  • 69
  • 108
  • I believe you don't need to import, you can directly give the path, check https://stackoverflow.com/questions/47196800/reactjs-and-images-in-public-folder – Sam Jan 13 '21 at 01:14
  • for the approaches which are working, do you have the images in your codebase itself? – gaurav5430 Feb 09 '22 at 19:01

3 Answers3

0

Can you just use <img src='http://example.com/images/my-image.jpg'/>?

Require and import are both used for loading dependencies locally in Node, so I don't think they'd apply here. You could either save the images locally and then require them, or reference an external URL.

Dom Eccleston
  • 59
  • 4
  • You are right, unfortunately all of these seem way too complex for my use case. I can't use url in `src` as after building the url is still there. – Wordpressor Jan 13 '21 at 12:00
0

this works.

const path='http://example.com/images/my-image.jpg';

<img src={path} />

require is used for function imports or react components.

Toby Maguire
  • 146
  • 1
  • 11
0

import MyImage from './images/my-image.jpg'; means import the proper url of './images/my-image.jpg'. Which may relate to how build tool package the app and what base path you set.

Now since you have a absolute url path of the image, why don't use it directly?

<img src="http://example.com/images/my-image.jpg" />
vipcxj
  • 840
  • 5
  • 10
  • Thanks, but how do I bundle images with absolute paths like above? Seems like no file-loader or url-loader process absolute paths... I end up with literally `src="http://example.com/images/my-image.jpg"` and it still loads the data from the remote server. – Wordpressor Jan 13 '21 at 11:58
  • @Wordpressor The image will be cached by the browser. If you want it be load from your server instead of original server. You can download the image and put in your project, then import it through the relative path, then the build tool such as webpack will calc the proper absolute path for you. – vipcxj Jan 13 '21 at 14:35