Javascript vue+；网页包项目img无法加载静态src

在我的vue（2.0）+webpack项目中，我配置了vue html加载程序，但在我的.vue文件中，img标记无法加载静态src图像。 以下是我的网页配置：

module: {
    loaders: [
        ...
        {
            test: /\.html$/,
            exclude: /node_modules/,
            loaders: ['html', 'html-minify']
        }
        , {
            test: /\.vue$/,
            loader: 'vue'
        }
        ...
    ]
},
vue: {
    ...
    html: {
        root: path.resolve(__dirname, './source/static'),
        attrs: ['img:src', 'img:srcset']
    },
    loaders: {
        css: ExtractTextPlugin.extract("css"),
        sass: ExtractTextPlugin.extract("css!sass")
    }
},
resolve: {
    root: [
        path.resolve('./source')
    ],
    extensions: ['', '.js', '.json', '.scss', '.html', '.css', '.vue'],
    alias: {
        'vue': 'vue/dist/vue.js'
    }
},

module: {
  loaders: [
    ...
    {
        test: /\.html$/,
        loaders: 'vue-html'
    }

下面是我的.vue文件：

<img src="/web/img/sieleLogo@1x.png" srcset="/web/img/sieleLogo@2x.png" />

---

我的浏览器总是出现404错误。有人遇到过同样的问题吗？

我的网页配置中有以下内容，对我很有用：

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue',
        options: vueConfig
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url',
        options: {
          limit: 10000,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  }

---

我在

src/assets

文件夹中有图像，我可以在没有任何特定设置的情况下访问和显示这些图像。

我会在你的网页别名中为你的静态

img

目录添加一个别名，即

resolve: {
  ...
  alias: {
    'vue': 'vue/dist/vue.js',
    'img': path.resolve(__dirname, '../web/img') // or wherever it is located relative to this file
  }
}

现在，您可以通过

~img

引用静态图像，即

<img src="~img/sieleLogo@1x.png" srcset="~img/sieleLogo@2x.png" />

我将用上面的代码替换您当前的html加载程序

然而，撇开这些不谈-由于构建一个可靠的webpack vue应用程序的复杂性，我强烈建议您安装vue cli：

然后，您只需推出一个经过测试且功能正常的网页包环境：

---

只需将应用程序复制到其中。您可能需要进行一些重构，但在设置上节省的时间绝对值得。

我认为静态图像需要

url加载程序。我强烈推荐vue cli使用的模板。请参阅@Phi Ihave added the url loader，bug它不起作用。您是否在img标记中添加了“srcset”属性？我已经按照您所说的做了，但是在浏览器中，srcset属性无法解析~img，它将“~img”视为url的字符串部分。