Nikulio
@Nikulio
NaN !== NaN

Как правильно грузить статические файлы (картинки, доки) в React/Webpack?

Всем привет
Не могу загрузить картинку в проект, отдаёт то "not found", то "unknown character"
webpack.config.js:

const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const BUILD_DIR = path.resolve(__dirname, "./dist");

module.exports = {
	context: path.join(__dirname, "/"),
	entry: ["babel-polyfill", "./src/index.js"],
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].js"
	},
	devServer: {
		contentBase: "./dist",
		// outputPath: BUILD_DIR,
		// hot: true,
		historyApiFallback: true
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader"
				}
			},
			{
				test: /\.scss$/,
				use: [
					{
						loader: "style-loader"
					},
					{
						loader: "css-loader"
					},
					{
						loader: "sass-loader"
					}
				]
			},
			{
				test: /\.css/,
				use: ["style-loader", "css-loader"]
			},
			{
				test: /\.html$/,
				use: [
					{
						loader: "html-loader"
					}
				]
			},
			{ test: /\.(jpe?g|gif|jpg|png|svg|woff|ttf|wav|mp3)$/, loader: "file", include: '/*/**' }
		]
	},
	plugins: [
		new HtmlWebPackPlugin({
			template: "./public/index.html",
			filename: "./index.html"
		}),
		new CopyWebpackPlugin([{ from: "./public/img/*", to: "./img" }], {})
	]
};


Попытки :
1) Тут отдало unknown charaсter, якобы нужен лоадер, хотя он у меня есть
const noImage = require('./img/no_image.jpeg');

2)
Тоже самое
<img src='./img/no_image.jpeg' alt=""/>

Как решить данную проблему?
  • Вопрос задан
  • 143 просмотра
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
реакт.рф, обучаю реакту и компании
Для первого варианта: попробуйте file-loader (а не просто file).

Для второго варианта: картинку надо брать из public директории.

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/' // название директории
  },


<img src='./static/popup-illustration.png' />

Во втором случае картинка не попадет в webpack, а будет отдана как есть.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
YLab Тольятти
от 70 000 до 130 000 руб.
MFMS Москва
от 150 000 до 250 000 руб.