Блог

У меня возникла проблема с рендерингом моих изображений из моего файла ‘. / src / img’ и я понятия не имею, где я ошибаюсь…

У меня есть объект, у которого есть ключ «image», который возвращает имя файла (т.е.: ‘filename.jpg ‘). Как указывалось ранее, изображения хранятся в папке ‘img’ в папке ‘src’.

в моем компоненте я возвращаю изображение следующим образом :

 <div className='image'>
    <img src={require(`../img/${details.image}`)} alt={details.name} />
    {
        console.log(details.image)
    }
  </div>
 

я использую функцию require, как и предполагалось, (я думаю ?! ^^) и указываю папку и извлекаю имя изображения с $(details.image) помощью .
Как вы можете видеть, я делаю консоль.журнал подробного изображения, который в обязательном порядке возвращает мне имена файлов.

Когда я захожу в консоль и проверяю рендеринг, у меня нет проблем с alt, но параметр src выдает мне [object Module]

И вот тут я как бы теряюсь в том, что происходит и что я там сделал не так.

Заранее спасибо

вместо модуля require попробуйте импортировать изображение, как предложено в документах creat-react-app.

импортировать логотип из ‘./logo.jpeg ‘;

 import React from 'react';
import logo from './logo.png'; // <<<< image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;   // <<<<<< Adding to src attribute.
}

export default Header;