Загрузка локальных изображений с помощью веб-пакета - PullRequest
Новая
       16

Загрузка локальных изображений с помощью веб-пакета

0 голосов
/ 24 сентября 2018

Привет. Я пытаюсь загрузить локальные изображения в веб-пакет, он успешно компилируется, однако я получаю следующую ошибку (и изображение отсутствует)

GET http://192.168.1.196:3000/b09d0fa90cacadcad6ce1679aea3d2ee.png 404 (не найдено)

Вот мой файл webpack.config.js: 

    const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public/scripts'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
            },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }

        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public'),
        publicPath: '/scripts/'
    },
    devtool: 'source-map'
}

Вот как я импортирую изображение 

import goku from '../public/images/goku.png'

Я пытаюсь также с помощью requireв IMG напрямую с тем же результатом. 

<img src =${require('../public/images/goku.png')}>
<img src =${goku}>

1 Ответ

0 голосов
/ 24 сентября 2018

На самом деле ваша проблема в том, что вы пропустили publicPath на выходе: 

output: {
        path: path.resolve(__dirname, 'public/scripts'),
        filename: 'bundle.js',
        publicPath: '/scripts/'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public'),
        publicPath: '/scripts/'
    },

Свойство publicPath на выходе должно соответствовать publicPath на devServer.

...