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 用于 function 导入或反应组件。

Answer 3

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

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

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