反应 |从 URL 导入图像 - 持有变量 - 为什么我得到错误的路径？

Question

我阅读了一些关于答案的内容，但没有找到我要找的东西。请向我推荐一个相关问题，如果它是重复的，请删除我的问题。

我有以下文件结构：

• components
  • icons
    • bitcoin_icon.png
    • ethereum_icon.png
    • ...
  • CoinsList.js
  • CoinsTable.js

如代码所示，我在 CoinsTable 中有一个名为 supportedCoins 的对象数组，其元素是 CryptoCoin 对象，并且具有 属性 iconURL存储图像（图标）的路径。

如代码所示，在 Coinstable.js 中，我有代码呈现 table，显示 supportedCoins 的所有元素，每个 属性 分别使用它们对象属性（例如 supportedCoins['bitcoin'].symbol），但是当尝试为 CryptoCoin 呈现以下内容时，例如，再次使用 supportedCoins['bitcoin']： <img src={supportedCoins['bitcoin'].iconURL，渲染的src 是实际路径，但是React不渲染图片

这就是我想做的，也是我想要工作的。

我发现在 CoinsTable.js 中执行以下操作确实有效：

1. 从正确的路径导入图标，例如： import biticonURL from './coins_icons/bitcoin_icon.png - 与 supportedCoins['bitcoin'].iconURL`

中的路径相同

2. 根据需要创建图像，仅 src={biticonURL}： `

为了比较我尝试过的不同方法，这里是 srcs supportedCoins['bitcoin'] 的结果： - supportedCoins['bitcoin'].iconURL：./coins_icons///bitcoin_icon.png - bitcoinIcon(import): /static/media/bitcoin_icon.b6168699.png

为什么我得到错误的路径，为什么我的图片存储在那里？图片没有存储在我的服务器上的这些路径中。

Answer 1

为什么我得到带有三重正斜杠的错误路径？

由于您在 CoinsList.js 中连接字符串的方式，您将获得 ./coins_icons///bitcoin_icon.png 路径。这是相关代码：

const coinsIconsDir = './coins_icons/';
supportedCoins['bitcoin'] = new CryptoCoin ('BTC', 'Bitcoin', coinsIconsDir + '/' + '/bitcoin_icon.png');

请注意 coinsIconsDir 末尾有一个正斜杠，一个作为单个字符，'/bitcoin_icon.png' 开头有一个正斜杠.解决这个问题的最简单方法是为正斜杠选择一个一致的位置，例如：

const coinsIconsDir = './coins_icons';
supportedCoins['bitcoin'] = new CryptoCoin ('BTC', 'Bitcoin', `${coinsIconsDir}/bitcoin_icon.png`);

现在您的路径将是 ./coins_icons/bitcoin_icon.png 所需的。

为什么我的图片存储在 static/media/ 路径下？

您正在使用构建和捆绑系统 运行 您的应用。在 运行 安装您的 Web 应用程序之前，该系统正在获取您正在导入的资源并将它们存储在 static/media/ 文件夹下。根据 static/media/ 路径，我猜您正在使用 create-react-app，它将获取图像和其他静态资产并将它们放置在最终构建中的静态文件夹中。就是这样描述的 here in the documentation。最相关的行是

Webpack finds all relative module references in CSS (they start with ./) and replaces them with the final paths from the compiled bundle.

This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths.

那么这对您的情况意味着什么？

我将为您提供多种导入图像的备选方案，您可以选择最喜欢的一种。

如果你修复了正斜杠，你应该可以使用：

<img src={supportedCoins['bitcoin'].iconURL} style={{maxHeight:'25px'}}/>

但是，如果 ./coins_icons/bitcoin_icon.png 在您的服务器上不公开可用（如果您使用 create-react-app 可能就是这种情况），这将不起作用。

在这种情况下，您需要将图像放在公开可用的位置（在 create-react-app 中，即 public folder），或者继续 import 它们正在做。 import 有几种不同的方法，包括使用您当前拥有的语法：

import bitcoinIcon from './coins_icons/bitcoin_icon.png';

如果您使用 Webpack，您也可以使用 require。请注意 require ，因此您需要在 require.

中构建文件路径

// Assuming supportedCoins['bitcoin'].iconName has been initialized to the icon's file name
// e.g., supportedCoins['bitcoin'].iconName === bitcoin_icon.png
<img src={require(`./coins_icons/${supportedCoins['bitcoin'].iconName}`)} style={{maxHeight:'25px'}}/>

然而，requires outside of the top level 并且 dynamic requires 可以被认为是不好的做法。为避免这种情况，您可以将 CoinsList.js 更改为：

import bitcoinIcon from './coins_icons/bitcoin_icon.png';
import ethereumIcon from './coins_icons/ethereum_icon.png';
import dashIcon from './coins_icons/dash_icon.png';
import iotaIcon from './coins_icons/iota_icon.png';

var supportedCoins = new Array();
const coinsIconsDir = './coins_icons/';
supportedCoins['bitcoin'] = new CryptoCoin ('BTC', 'Bitcoin', bitcoinIcon);
supportedCoins['ethereum'] = new CryptoCoin('ETH', 'Ethereum', ethereumIcon);
supportedCoins['dash'] = new CryptoCoin('DASH', 'Dash', dashIcon);
supportedCoins['iota'] = new CryptoCoin('IOTA', 'IOTA', iotaIcon);

然后在 CoinsTable.js 中执行：

<img src={supportedCoins['bitcoin'].iconURL} style={{maxHeight:'25px'}}/>

我会选择最后一个选项，因为它将硬币定义包含在一个文件中并使所有导入保持静态。