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

Posted 2023-02-22

【中文标题】无法将图像添加到 Vue.js 组件

【英文标题】：Can't add images to Vue.js component

【发布时间】：2020-04-04 22:02:57

【问题描述】：

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

【问题讨论】：

您需要确保图像存在并且在项目文件中的正确位置。

您可以在线使用图像进行测试！确保不是有问题的图像路径

@user_1330 没有错误但img不显示

我的图片在 assets 文件夹中

您可以在组件数据中添加一个属性，如image:require("./assets/img.jpg")，然后将其绑定到图像标签src，如<img :src='image' />。

【参考方案1】：

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

好消息是，您实际上并不需要 webpack 加载器。当您构建 vue 应用程序时，/public 下的任何资源都将作为资产提供。

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

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

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