javascript - webpack直接在html标签中使用图片

Question

我是 webpack 的新手，我想知道是否可以直接在 html 标签中使用图像？我能够在 CSS 文件中加载图像作为背景:

background: url("../images/dog.png")

但是当我想像这样在 img 标签中使用它时:

<img id="home" height='75px' width='75px' src="../src/images/dog.png" /> 

我得到错误:无法获取/src/images/dog.png这是我的 webpack.config:

            {
            test: /\.(gif|png|jpeg?g|svg)/i,
            use: [{
                loader: 'url-loader',
                options: { 
                    name: 'images/[name].[ext]',
                    gifsicle:{
                        interlanced: false
                    },
                    optipng:{
                        optimizationLevel: 7
                    },
                    pngquant: {
                        quality: "65-90",
                        speed: 4
                    },
                    mozjpg:{
                        progressive: true,
                        quality: 65
                    }
                } 
            }]
        }

以及我的元素的层次结构:

出了什么问题？

Answer 1

在您的公共(public)文件夹下创建一个 images文件夹并在您的 html img 标签中传递图像文件夹的路径:

<img id="home" height='75px' width='75px' src="/images/dog.png" />

如果你想在 js 文件或 jsx 中使用图像，请使用 webpack import

import React from 'react
import dog from './src/images/dog.png'

// ReactJS like component and images imports.
const RenderDogImage = (props) => <img src={dog} alt='This is a dog' />

没有反应的沙盒:https://codesandbox.io/s/k08zx1xv03