Реагируйте: Используя переменную состояния в изображении Sr c?

Question

Итак, я экспортировал все изображения в своей папке изображений, используя индекс. js внутри той же папки и записал экспорт, такой как export const Image = require("./image.png");. Затем я импортировал указанные изображения в свое приложение React с import { Image, Image2, Image3 } from from "./imageFolder";

Когда я использую импортированные изображения в качестве значений sr c в своих тегах изображений, они работают очень хорошо, поэтому я знаю, что я правильно импортировал свое изображение , Большая проблема, с которой я столкнулся, заключается в том, что я пытался использовать значение переменной состояния в файле для динамического рендеринга другого изображения в зависимости от состояния. Значения переменной состояния варьируются из-за ее значений, полученных из запроса к базе данных, который хранится в массиве состояний.

{
  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} />? Можно ли сделать то, что я пытаюсь сделать?

Answer 1

Если я не понимаю, что вы имеете в виду, я не понимаю, как было бы возможно иметь это 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]} />

Ключом является то, что мы сопоставляем строки с реальными импортированными изображениями

Answer 2

Вы не можете сделать это, потому что p1Character является строкой, а не живой переменной.

Однако вы можете импортировать изображения как

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

, а затем использовать p1Character для ссылки на изображение в Images.

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