Webpack — изображение загружается неправильно

#webpack #webpack-file-loader

Вопрос:

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

загрузчик файлов в моем webpack.config.js

{

         test: /.(png|jpeg|gif|svg)$/i,
        use: [
            {
                loader: "file-loader",

                options: {
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }
        ]
    },
 

В моем src/index.html :

 <img src="images/test.png">
 

Когда я запускаю команду webpack, изображение копируется в dist/изображения, но также и в каталог dist с именем файла «5fc654fa1aab001a9299.png»

В результате в dist/index.html :

 <img src="5fc654fa1aab001a9299.png">
 

Папка с изображениями

Изображение не отображается, что не так с моей конфигурацией ?

Комментарии:

1. Поиск в инструментах разработки в браузере может помочь. Если с URL-адресом изображения что-то не так, в консоли появится ошибка 404. Это должно дать вам некоторые подсказки относительно того, в чем именно заключается проблема.