Vue项目中img标签绑定本地路径为何无法正常显示图片

如题，在某个愉快(比较闲)的下午，无意间碰到这个BUG，所以想记录一下

---

下面是项目的目录结构

去掉node_moudlues之后的目录结构

├─public
│      favicon.ico
│
└─src
    │  App.vue
    │  index.css
    │  main.js
    │
    ├─assets
    │      logo.png
    │
    └─components
            HelloWorld.vue

问题描述

在img标签中动态绑定src属性，并且想展示项目文件夹内的图片【图片存在，且相对路径没有写错】

代码即图片显示效果

<template>
  <img alt="Vue logo" :src="imgUrl" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data: () => ({
    imgUrl:'./assets/logo.png'
  }),
}
</script>

图片加载失败，如下图

---

思考了一会儿，发现原来和相对路径、绝对路径的知识有关【还和模块加载有关】

简单理解相对路径、绝对路径

• 相对路径

  即相对于当前文件或目录的一个路径，。它不包括根目录，而是从当前位置开始追溯到目标文件或资源。相对路径更为简短，但是它的有效性取决于当前工作目录。

• 绝对路径

  计算机文件系统的根目录开始描述文件或资源的位置。它提供了完整的路径信息，包括所有的文件夹层级。绝对路径可以确切地指示一个文件的位置，无论当前工作目录是什么

在上面的代码中，我们给img动态绑定的src属性值为相对路径，在Vue.js中的绝对路径和相对路径通常是相对于你的Vue应用的基本路径（Base URL）的。

(更新于23年9月4日) 今天再一次遇到了这种需要动态绑定scr属性加载图片的问题，然后终于明白了，原来我们给img标签绑定的imgUrl其值为字符串，我们把这个字符串放到src上，人家当然不会去解析图片的路径啦。好笨 ):

最简单的方法

把图片资源放在public目录文件夹下

public
│  favicon.ico
│
└─assets
        logo.png

当然还可以这样【推荐】

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data: () => ({
  // 使用require加载指定路径下的模块
    imgUrl:require("./assets/logo.png") 
  }),
}
</script>