Использование изображений непосредственно в тегах HTML через веб-пакет

Question

Я новичок в веб-упаковке и мне было интересно, можно ли использовать изображения непосредственно в тегах HTML?Я смог загрузить изображения в файл CSS в качестве фона:

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

Но когда я хочу использовать его в теге img, например:

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

Я получил ошибку: Cannot GET /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

В вашей общей папке создайте папку images и в своем теге html img просто укажите путь к папке с изображениями:

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

, если вы хотите использовать изображениевнутри вашего js-файла или jsx используйте импорт веб-пакета

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