Public文件夹下图片引用方式疑问？

Question

public文件夹下放置了一些静态资源如图片之类的

我现在在src/views/house/index.vue中调用public中的图片

直接是./图片名称

但是在这个页面下方<style>中，再去调用public中的图片时，这样写就报错。必须写成

图片名称前面必须加../../../public/图片

然而在这个页面的<script>中，又变成了这样写：

必须加require

谁能给普及下这三个路径调用的方式？

Answer 1

区别在于：编辑器和打包工具知不知道（以及需不需要知道）那个字符串是一张图片的 URL 。

• 对于编辑器而言，如果她知道字符串是一张图片的 URL，比如作为 style.backgroundImage: url ，那么她就会检查你这张图是否存在，没有的话就会警告；
• 对于打包工具而言，有些资源她需要一并打包，凡是在她打包的范围内的，她都会根据 URL 去寻找文件，找不到就停止打包并报错。

所以：

• template 里的 icon 属性，只是一个没有意义的字符串，所以二者都不会去管，哪怕你写一个"just for test" 都没关系，这俩不会管，最终发现问题的会是浏览器（并非绝对，看配置）；
• style 里的 background:url，明确代表一张图片，必须确定这张图片是存在的，否则编辑器可能警告，打包工具则有可能报错（看配置）；
• script 里，字符串是没有明确意义的，如果你想告诉打包工具这个字符串是一张图片（或者任何文件资源），那么你就要用require函数指向文件地址。

使用 Vue 的时候还会出现一种有趣的现象：配置了静态资源目录的 alias，这样就可以使用@/代替静态资源目录，打包工具(vue-cli或vite)往往知道字符串指向的地址，但是编辑器可能知道，出现很多警告，并且提示功能也用不了。
这个问题，针对不同的编辑器有不同的解决方案。

当然这样说是为了方便理解，而且所有这些行为与编辑器的设置和打包环境的配置息息相关，并不是这么简单就能分类的。