Webpack 内联图片路径答案

【问题标题】：Webpack inline image pathWebpack 内联图片路径
【发布时间】：2019-10-02 13:20:46
【问题描述】：

我有一个包含 webpack 和 vue.js 的项目。当我使用 src 在 vue 模板中添加图像时，例如 '/images/imageName.png'，浏览器会抛出错误 404。如何配置它以使其看到绝对路径？

我有这个根路径：

../public
- myProject
-- webpack.config.js
-- src
--- app.vue
--- app.js
-- images
--- some folders with images

在 Vue 模板中，我使用带有绝对路径的 src：

<img src="/images/apps/small-logo/android-text-logo.png" alt="img">

output: {
    path: path.resolve(__dirname, '../../public'),
    publicPath: '/',
    filename: '[name].js'
  },

test: /\.(png|jpg|svg)$/,
   use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]'
            }
   }
]

【问题讨论】：

标签： javascript vue.js webpack

【解决方案1】：

绝对路径应该包含比您上面的信息更多的信息，这就是 404 的原因，它应该包括协议，即 http、文件

亲戚

<img src="images/apps/small-logo/android-text-logo.png" alt="img">

绝对

<img src="http://example.com/images/apps/small-logo/android-text-logo.png" alt="img">
<img src="file:///some_random_path/images/apps/small-logo/android-text-logo.png" alt="img">

如果您想使用绝对路径，请确保包含协议和必要的路径。

对于相对路径，您可以像这样在 html 中定义基本标记：

<base href="/some_random_path/" />

【讨论】：

谢谢你，但是我怎样才能在 devserver 上的 webpack 中包含本地主机到绝对路径？
试试这个<img src="http://localhost:PORT/images/apps/small-logo/android-text-logo.png" alt="img">，将 PORT 替换为您正在使用的端口，即 3000、3030
那么，我想构建，这个 src 不会在我的构建中刹车？
它肯定会破坏它，这只适用于你的开发环境，你应该在你的 webpack 配置文件中创建一个全局变量。有 2 个不同的 webpack 配置文件，一个用于生产，另一个用于开发。然后，您可以在每一个中设置基本路径，即开发的基本路径和实时的基本路径。查看this other answer for tips on setting global variables。