时间戳

首页 > 解决方案 > 无法将图像添加到 Vue.js 组件

javascript - 无法将图像添加到 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&) 找不到模块：错误：可以'在'/Users/kurbs/Desktop/Flaintweb2/flaintweb/src/components'中'不解析'./assets/logo.png'

我的代码

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

标签： javascripthtmlvue.jswebpackvuejs2

解决方案

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

好消息是，你真的不需要 webpack 加载器。当您构建 vue 应用程序时，其下的任何资源/public都将用作资产。

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

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

（我只习惯vue-cli 3。我真的不知道资产处理是否从其他版本的vue-cli改变）

推荐阅读