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

Question

我正在使用一个 React 插件来处理我的所有图像，它允许两种类型的加载数据。

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

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

<img src={MyImage} />

两种方法都可以正常工作，但我面临的问题是：

• 我收到了我的图片作为回复，
• 它们存储在单独的服务器上。

我尝试过硬编码以查看远程服务器是否可以工作，但它不能：

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

我该如何解决这个问题？我什至可以要求（'http://absolute-address.domain'）吗？真的不知道在哪里可以找到关于 React 的 require 文档，在文档中的任何地方都找不到。

Answer 1

你能用<img src='http://example.com/images/my-image.jpg'/>吗？

Require 和 import 都用于在 Node 中本地加载依赖项，所以我认为它们不会在这里应用。您可以将图像保存在本地，然后 require 它们，或者引用外部 URL。

Answer 2

这行得通。

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

<img src={path} />

require 用于函数导入或反应组件。

Answer 3

import MyImage from './images/my-image.jpg'; 表示导入“./images/my-image.jpg”的正确网址。这可能与构建工具如何打包应用程序以及您设置的基本路径有关。

既然有了图片的绝对url路径，为什么不直接使用呢？

<img src="http://example.com/images/my-image.jpg" />