如何在webpack中使用？

Question

当我试图加载图像时

<img class="brand" alt="Brand" width="50%" height="50%" src="/logo.jpg">

它会产生以下错误：

logo.jpg：1获取http://localhost:8080/logo.jpg 404（未找到）

webpack.config.js：

module: {   
    loaders: [
        {
            test: /\.html$/,
            exclude: /index\.html$/,
            loader: 'html-loader?root=./assets/images&interpolate&name=./views/[name].[ext]'
        },
        {
            test: /\.(png|jpg|jpeg|gif)$/,
            loader: 'url-loader?limit=10000&name=./assets/images/[name].[ext]'
        }
    ]
}

Answer 1

您必须在import/require文件中entry js您的图像，该图像将被处理并添加到您的output目录，并且Logo变量将包含处理后的图像的URL

import Logo from './logo.jpg';

另一种方法是使用html-loader并将其导入entry js文件中。然后你可以使用通常的src属性，如在HTML中。