0

目前，我有一些代码能够将变量设置为与调用图像的导入语句之一同名。我试图找到一种方法来使用它来显示图像。我的代码查看了一些数据并得出了一个名称，例如“Bill”，并将其分配给 name。然后它将尝试使用以下代码显示图像：

<img src={name} alt ='' />

而不是使用

<img src={Bill} alt ='' />

我在顶部有一个导入语句，即“从路径导入 Bill ”，它能够生成底部语句，但我希望它与变量一起显示。让我知道这是否太令人困惑，以便我可以更好地解释它，或者您需要更多代码，我可以提供。

添加了一些更好的代码：

import React from 'react'
import Bill from '../../img/players/Bill.jpg'
import Grant from '../../img/players/Grant.jpg'


const CharacterItem = ({ info, index }) => {
    var name = info[index][0].last_name
    console.log(name) //outputs Bill
    console.log(name === Bill) //outputs false
    return (
        <img src={'../../img/players/' + name} alt ='' />
4

2 回答 2

1

它不起作用的原因是模块捆绑器（例如 webpack）使用文件加载器输出图像文件并在导入图像时返回路径。

看看这个https://webpack.js.org/guides/asset-management/#loading-images

<img />src仅当路径用于浏览器中捆绑的静态文件时，标记才会引用相对 url。

于 2020-07-26T22:24:39.350 回答
0

如果您知道文件的名称，只需将路径作为字符串提供。

<img src={"./path/" + name} alt ='' />

如果这不能解决您的问题，提供代码或更好的解释会有所帮助。

于 2020-07-26T22:03:10.683 回答