как импортировать изображение из файла JS

Question

Я практикуюсь над проектом webpack.Я получил ошибку при импорте файла img.Я новичок в вебпаке.Я установил «image-webpack-loader», но все равно получил ошибку.

Вот код webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/,
            },
            {
                loader: ExtractTextPlugin.extract({
                    loader: 'css-loader'
                }),
                test: /\.css$/
            },
            {
                test: /\.(jpe?g | png | gif |svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 40000
                        }
                    },
                    'image-webpack-loader'
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ]
};

module.exports = config;

А вот файл image_viewer.js

import '../assets/big.jpg';
import '../assets/small.jpg';

import '../styles/image_viewer.css';

const image = document.createElement('img');
image.src = 'http://lorempixel.com/400/400';

document.body.appendChild(image);

Я не могу найти решение этой проблемы.Вы можете увидеть проблему.Style.css и build.js правильно упакованы, но когда я работаю с имиджем, он не работает, появляется ошибка, о которой я упоминал ниже.

> webpack

keywords if/then/else require v5 option
Hash: 5ba37842c394273b5247
Version: webpack 2.2.0-rc.0
Time: 2330ms
    Asset      Size  Chunks             Chunk Names
bundle.js   4.38 kB       0  [emitted]  main
style.css  41 bytes       0  [emitted]  main
   [0] ./src/image_viewer.js 452 bytes {0} [built]
   [1] ./src/sum.js 177 bytes {0} [built]
   [2] ./assets/big.jpg 235 bytes {0} [built] [failed] [1 error]
   [3] ./assets/small.jpg 237 bytes {0} [built] [failed] [1 error]
   [4] ./styles/image_viewer.css 41 bytes {0} [built]
   [5] ./src/index.js 303 bytes {0} [built]
    + 1 hidden modules

ERROR in ./assets/small.jpg
Module parse failed: I:\Javascript & Angular & Node\webpack\assets\small.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/image_viewer.js 7:13-43
 @ ./src/index.js

ERROR in ./assets/big.jpg
Module parse failed: I:\Javascript & Angular & Node\webpack\assets\big.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/image_viewer.js 3:11-39
 @ ./src/index.js
Child extract-text-webpack-plugin:
       [1] ./~/css-loader!./styles/image_viewer.css 204 bytes {0} [built]
        + 1 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! jsmodule@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the jsmodule@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Engraved\AppData\Roaming\npm-cache\_logs\2018-05-27T10_29_34_980Z-debug.log

Моя версия веб-пакета "webpack": "^ 2.20,0-rc.0" .

Answer 1

Я получил ответ на эту ошибку.Я исследовал больше и нашел проблему.Это маленькая проблема, из-за которой я рассердился.

Проблема заключалась в том, чтобы добавить пространство для расширения изображений, о котором я упоминал в коде.См. Ниже строки

test: /\.(jpe?g | png | gif |svg)$/

Эта строка разозлилась на меня.Вы не можете дать пространство между ними.

test: /\.(jpe?g|png|gif|svg)$/ - This is the correct.