Ошибка: не удается разрешить './images/sample.png' React Webpack
Пытался создать приложение MERN с помощью Webpack и не мог загружать изображения в React.
Метод рендеринга компонента React:
const logo = require('./images/sample.png');
<img src = {logo}'/>
Webpack
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
{ test: /\.css$/, use: ['style-loader','css-loader']},
{test: /\.(jpg|png|svg)$/, loader: 'url-loader'}
] }
выводит bundle.js в папку src, файловая структура ниже
Файловая структура
приложение
| ...... src
......... | компоненты
.................... | component.js
......... | изображения
.................... | sample.png
Неважно, как я изменяю путь в require, и даже если я помещаю изображение sample.png в ту же папку, что и component.js, я получаю сообщение об ошибке, которое не может быть разрешено. Я думаю, что это ошибка веб-пакета, но сколько бы руководств и форумов я ни читал, я не могу ее исправить.
В идеале я бы загружал изображения динамически, а не объявлял такие конкретные требования, поэтому, если есть лучший способ, скажите мне.
Обновлено:
Я изменил src = {logo} на src = {require("${logo}")} и больше не получаю ошибку на стороне сервера. Вместо этого я получаю сообщение об ошибке в консоли разработчика (используя Chrome), которая, похоже, возвращает img URI (проблема с реакцией?):
Неперехваченная ошибка: не удается найти данные модуля: image / png; base64 ...
и вы пытались указать URL-адрес файла в src вместо использования require ()?
поменять URL-загрузчик на загрузчик файлов
@ Dinosan0908 1. Я использую React Router, поэтому не думаю, что могу перейти к изображению, не создавая серверный маршрут для его обслуживания? 2. как <img src = "image / sample.png" />? Да, ошибки нет, но изображение не отображается.
@ PlayMa256 Я попытался использовать как url-loader, так и file-loader, как по отдельности, так и вместе в webpack, настроив параметры для url-loader, чтобы он переключался на загрузчик файлов при определенном размере изображения. Не повезло.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В вашем web.config.js вам понадобится
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
};
и добавьте сюда
module: {
rules: [
...
imageLoaderConfiguration,
...
],
},
не сработало. вы думаете, что разработка в Amazon Cloud9 имеет к этому какое-то отношение?
Не уверен, нужно будет увидеть файлы в вашем каталоге.
вы можете открыть свое изображение в браузере?