Изображение src в Inspect Element отображается как [object Object]

Question

Я пытаюсь получить изображение для отображения в моем разделе из моего файла .json.Итак, как всегда, я добавил опору к компоненту и проанализировал значения файла .json, который равен config.dog.src.Я консоль распечатать это, и значение отлично получается с dog.png в консоли.Тем не менее, в элементе кода в inspect он показывает [object Object].Любая идея?

Я пытался изменить файл .json и жесткое кодирование, но это противоречит цели файла .json, так что на самом деле не хочу этого делать.

dog:{
    src: "dog.png"
} 

<DogComponent src={config.dog.src} />

Элемент проверки консоли показывает следующее:

<img src=[object Object] />

Ожидаемый результат должен быть:

<img src="dog.png" />

Answer 1

Похоже, вам не хватает file-loader для веб-пакета. Добавьте это в раздел вашего модуля конфигурации webpack и убедитесь, что вы импортируете образ по разрешаемому пути, и он должен работать:

{
  test: /\.(jpe?g|png)$/i,
  include: path.resolve(__dirname, './'),
  loaders: ['file-loader']
}