Question

我是Vue的新手。我正在尝试将图像（svg / png）添加到组件，但是我一直收到此错误。我是新手，请谨慎考虑。

无法编译。

./ src / components / Overview.vue？vue＆type = template＆id = 6408adae＆scoped = true＆   （./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"06a978e8-vue-loader-template"}!../node_modules/ vue-loader / lib / loaders / templateLoader.js ?? vue-loader-options！./ node_modules / cache-loader / dist / cjs.js ?? ref--0-0！./ node_modules / vue-loader / lib vue-loader-options！./ src / components / Overview.vue？vue＆type = template＆id = 6408adae＆scoped = true＆）   找不到模块：错误：无法解析“ ./assets/logo.png”   '/ Users / kurbs / Desktop / Flaintweb2 / flaintweb / src / components'

我的代码

<template>
  <div class="hello">
   <h1>Flaint</h1>
   <p>Flaint allows artists to create their virtual art gallery to showcase their paintings.</p>
   //Error <img src="./assets/logo.png">
  </div>

</template>

<script>
export default {
  name: 'Overview',

  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Answer 1

通过将相对URL传递给img标签，我认为webpack正在尝试处理资源，因此由于您没有正确的加载程序而产生了错误。

好消息是，您实际上并不需要webpack加载程序。生成vue应用程序时，/public下的任何资源都将用作资产。

因此，您可以通过将图像移动到public/assets，然后将组件的img设置为以下方式来解决此问题：

<img src="/assets/logo.png">

（我只习惯使用vue-cli3。我真的不知道资产是否会处理其他版本的vue-cli的变化）

无法将图片添加到Vue.js组件

1 个答案: