Javascript Can'；t将图像添加到Vue.js组件

我是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>

炫耀
Flaint允许艺术家创建他们的虚拟艺术画廊来展示他们的绘画

//错误
导出默认值{
名称：“概述”，
道具：{
msg:String
}
}
h3{
利润率：40px0；
}
保险商实验室{
列表样式类型：无；
填充：0；
}
李{
显示：内联块；
利润率：0.10px；
}
a{
颜色：#42b983；
}

通过将相对URL传递给img标记，我认为webpack试图处理资源，因此产生了一个错误，因为您没有正确的加载程序

好消息是，你并不真的需要一个网页加载器。构建vue应用程序时，

/public

下的任何资源都将作为资产使用

因此，您可以通过将图像移动到

public/assets

，然后将组件的img设置为：

---

（我只习惯于vue cli 3。我真的不知道资产是否处理来自其他版本vue cli的更改）

通过将相对URL传递给img标记，我认为webpack正在尝试处理资源，从而生成错误，因为您没有正确的加载程序

好消息是，你并不真的需要一个网页加载器。构建vue应用程序时，

/public

下的任何资源都将作为资产使用

因此，您可以通过将图像移动到

public/assets

，然后将组件的img设置为：

---

（我只习惯于vue cli 3。我真的不知道资产是否处理来自其他vue cli版本的更改）

您需要确保映像存在并且位于项目文件中的正确位置。您可以在线使用映像进行测试！可以肯定的是，这不是有问题的图像path@user_1330没有错误，但img不会显示“我的图像在资产”文件夹中。您可以在组件数据中添加属性，如

image:require（“./assets/img.jpg”）

，然后将其绑定到图像标记src，如

。您需要确保图像存在并且位于项目文件中的正确位置。您可以在线使用图像进行测试！可以肯定的是，这不是有问题的图像path@user_1330没有错误，但img不会显示“我的图像在资产”文件夹中。您可以在组件数据中添加属性，如

image:require（“./assets/img.jpg”）

，然后将其绑定到图像标记src，如

。