Vue/Webpack无法编译图像

我到处搜索并应用了各种方法，但仍然无法让Webpack和Vue成功编译在.Vue文件中寻址的图像资产

我尝试过摆弄文件加载器、url加载器、引用图像的不同方式以及导入左侧和右侧，即使在下面的代码中没有显示。我想我应该要求得到一个具有教育意义的结论性答案

请注意，当图像从代码中删除时，一切正常

错误

ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-8959d626","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/js/component.vue
Module not found: Error: Can't resolve './assets/img/test.jpg' in 'D:\Projects\Web\src\js'
 @ ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-8959d626","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/js/component.vue 28:27-59
 @ ./src/js/component.vue
 @ ./src/js/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/js/main.js
webpack: Failed to compile.

组件.vue

<template>
<div>
<img src="./assets/img/test.jpg">
</div>
</template>

 src
  - assets
  -- img
  --- test.jpg
  - js
  -- component.vue
  -- main.js

webpack.config.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import component from './component.vue';

Vue.config.devtools = true;
Vue.use(VueRouter);

const routes = [{
    path: '/component',
    component: component
  }
];

const router = new VueRouter({
  routes,
  mode: 'history'
});

new Vue({
  el: '#app',
  router
});

var path = require('path');

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/dist'),
    publicPath: '/public/dist/'
  },
  module: {
    rules: [{
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // `vue-loader` options
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
};

文件结构

<template>
<div>
<img src="./assets/img/test.jpg">
</div>
</template>

 src
  - assets
  -- img
  --- test.jpg
  - js
  -- component.vue
  -- main.js

---

路径必须是相对的。由于您位于

js

文件夹，因此必须使用

向上导航。

：

<img src="../assets/img/test.jpg">

细分： 这就像是常规的文件夹导航。由于

位于

src/js/component.vue

，要访问

test.jpg

，您需要：

• 初始文件：

  src/js/component.vue

• 起始文件夹：

  src/js/

  • 。/

    现在您在

    src/

  • 。/assets

    现在您位于

    src/assets

  • 。/assets/img

    现在您位于

    src/assets/img

  • 。/assets/imgtest.jpg

    现在您得到了

    src/assets/img/test.jpg

参考：

---

正如所指出的，资产行为的一个很好的资源/参考是

，奇怪的是，我已经尝试了多次，当我已经运行dev服务器时，它不起作用，但是如果我重新启动项目并再次运行它，它将成功编译。谢谢你的帮助！这些文档帮助我更多地了解了webpack在使用assets@AkinHwan的场景中所做的工作，这确实是一个很好的参考。我已添加到问题中作为编辑。非常感谢你指出这一点。