反应：在图像 Src 中使用状态变量？答案

【问题标题】：React: Using State Variable In Image Src?反应：在图像 Src 中使用状态变量？
【发布时间】：2020-04-06 14:40:25
【问题描述】：

因此，我通过在同一文件夹中使用 index.js 并编写导出文件（例如 export const Image = require("./image.png");）来导出图像文件夹中的所有图像。然后我使用import { Image, Image2, Image3 } from from "./imageFolder"; 将上述图像导入我的 React 应用程序

当我在我的图像标签中使用导入的图像作为 src 值时，它们工作得很好，所以我知道我已经正确地导入了我的图像。我遇到的最大问题是我一直在尝试利用文件中状态变量的值来根据状态动态渲染不同的图像。状态变量的值是变化的，因为它的值来自存储在状态数组中的数据库请求。

{
  Object.keys(this.state.videos).map((video, index) => {
    return (
      <div key={index}>
      <p>Event: {this.state.videos[video].eventName}</p>
      <p>P1 Character: {this.state.videos[video].p1Character}</p>
      <p>P2 Character: {this.state.videos[video].p2Character}</p>
      </div>
      );
      })
}

假设在这种情况下，{this.state.videos[video].p1Character} 的值等于“Image”——这与我上面导入的图像的名称相对应。那我为什么不能<img src={this.state.videos[video].p1Character} />？有可能做我想做的事吗？

【问题讨论】：

标签： reactjs image

【解决方案1】：

你不能这样做，因为p1Character 是一个字符串，而不是一个实时变量。

但是，您可以将图像导入为

import * as Images from from "./imageFolder";

然后使用p1Character引用Images中的图片。

<img src={Images[this.state.videos[video].p1Character]} />

【讨论】：

【解决方案2】：

除非我不明白你的意思，否则如果你只是将它们的引用保存为字符串，我看不出如何使 this.state.videos[video].p1Character 等于 Image/Image2/Image3，因为你确实是只是要写src="Image/2/3"。

最好的办法是在记录中为图像存储一个唯一的键字符串，然后在您的组件中使用一个简单的对象映射，例如

const myImageMap = {
  image1: Image,
  image2: Image2,
  image3: Image3
}

/////
///// somewhere in your render
/////

<img src={myImageMap[this.state.videos[video].p1Character]} />

关键是我们将字符串映射到实际导入的图像

【讨论】：