Блог

Я программист-самоучка и новичок в Webpack (v.4). Я пытаюсь отобразить некоторые изображения из файла, но они отображаются неработающими во всех браузерах. Я установил загрузчик файлов и даже попробовал прямую ссылку URL после установки загрузчика URL, но безуспешно. Я не уверен, чего мне не хватает. Любые рекомендации будут с благодарностью приняты.

Это моя файловая структура:

Это dev.js файл:

 const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')

module.exports = {
    entry: './src/client/index.js',
    mode: 'development',
    devtool: 'source-map',
    output: {
        libraryTarget: 'var',
        library: 'Client'
    },
    stats: 'verbose',
    module: {
        rules: [{
                test: '/.js$/',
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /.jpg$/,
                loader: 'file-loader'
            },
            {
                test: /.(jpeg|png|jpg|JPG|gif)$/,
                loader: 'url-loader',
            }
            
        ]
    }, 
  

Это мой index.js файл:

 import {
  checkForUrl
} from './js/urlChecker'
import {
  handleSubmit
} from './js/formHandler'

import './styles/resets.scss'
import './styles/base.scss'
import './styles/form.scss'
import './styles/footer.scss'
import './styles/header.scss'
import './images/negative.jpg'
import './images/neutral.jpg'
import './images/positive.jpg'


console.log(checkForUrl);

export {
  checkForUrl,
  handleSubmit
}
  

И вот как я использую его в своей функции — возможно, это неверно

 .then(function (res) {
            if(res.polarity === 'neutral') {
                let img = document.createElement('img');
                img.src = './images/neutral.jpg'
                document.getElementById('polarityImg').appendChild(img);
            }
            if(res.polarity === 'positive'){
                let img = document.createElement('img');
                img.src = './images/positive.jpg'
                document.getElementById('polarityImg').appendChild(img);
            }
            if(res.polarity === 'negative'){
                let img = document.createElement('img');
                img.src = './images/negative.jpg'
                document.getElementById('polarityImg').appendChild(img);
            }
  

Заранее благодарю вас за помощь такому новичку, как я!

Вы должны импортировать свое изображение, используя синтаксис модулей CJS или ES6, как показано в документации Webpack. Пожалуйста, обратитесь к https://webpack.js.org/guides/asset-management/#loading-images этот раздел документации webpack для дальнейшего руководства!