0

我是自学成才的程序员，也是 Webpack(v.4) 的新手。我正在尝试显示文件中的一些图像，但它们在所有浏览器中都显示损坏。我安装了一个文件加载器，甚至在安装了一个 url-loader 后尝试了一个直接的 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);
            }

提前感谢您帮助像我这样的菜鸟！

4

1 回答 1

1

您应该使用 Webpack 文档中所示的 CJS 或 ES6 模块语法导入图像。请参考https://webpack.js.org/guides/asset-management/#loading-images这部分的 webpack 文档以获得进一步的指导！

于 2020-08-29T23:58:59.697 回答