React - 从远程服务器加载图像（绝对路径需要/导入）？

Question

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.

Answer 1

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.

Answer 2

this works.

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

<img src={path} />

require is used for function imports or react components.

Answer 3

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" />