Изображения в React: возможно ли использовать строку из импортированного объекта в качестве исходного пути для изображения?

Question

Вопрос об использовании изображений в React!

Импортирует картинку, а затем использует ее:

import photo from "../img/profilephoto.jpg"

<img src={photo} />

Использование реквизитов в качестве источника внутри require () работает:

<img src={require(`../img/${this.props.img}`)} />

Но импорт объекта (с большим количеством объектов), а затем использование навигации для получения строки не работает!

import text from "../text" // This is the object wich contains more objects

<img src={require(`../img/${text.contact.photo}`)} />

Ошибка, поскольку "текст не определен".

Я ищу ответ в Интернете, но не могу найти решение для импортированного объекта. Можно ли использовать ключ / значение в импортированном объекте в качестве источника пути для img, где само img ранее не импортировалось?

Answer 1

Проблема решена!

До

У меня так было в text.js; просто объекты:

export default {

  header: {
    key: "value,
    key: "value",
    photo: "./img/photo.jpg"
},

  footer: {
  ...and so on...
  }

}

И в компоненте у меня было это:

import text from "../text" // This is the object wich contains more objects

<img src={require(`../img/${text.contact.photo}`)} />

* После 1014 *

Чтобы функция require () работала, фотография должна быть известна. Поэтому я изменил это в text.js:

*import photo from "./img/photo.jpg"* //This import is new

export default {

  header: {
    key: "value,
    key: "value",
    photo: *photo* //Use the imported phto instead of writing the file path
},

  footer: {
  ...and so on...
  }

}

А в компоненте:

<img src={text.contact.photo}/> //Using the text.js with the objects

А теперь это работает !!

Спасибо за отзыв!