时间戳

首页 > 解决方案 > Webpack 内联图片路径

javascript - Webpack 内联图片路径

问题描述

我有一个带有 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]'
            }
   }
]

标签： javascriptvue.jswebpack

解决方案

绝对路径应该包含比您上面的信息更多的信息，这就是 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/" />

推荐阅读