Vue 图片资源路径问题

Posted 2023-03-09

参考技术A web需要大量图片，图片来源大致分为这几个：

静态的应该是指类似 logo 之类的，用作页面修饰的图片。

动态的是指从服务器动态得到的（如博客图片每一篇都不一样，需要动态获取）。

写法大致分为这几个：

由于是新手，所以不从原理探究，而是了解用法。

仔细观察项目目录，分有 public 和 asserts 文件夹：

顾名思义，这两个文件夹应该管控资源。

首先从asserts开始。

我们首先打开 App.vue ,查看template:

里面定义了一个 Vue logo，其中引用了asserts文件夹的图片。根据路径，我们可以找到图片路径。那么如果我们有其他图片，自然也可以类比使用。

接下来我们看看在更高层目录（组件）中是否也可以通过这种方式使用：

上面我们在 components 文件夹中使用，通过 .. 尝试使用asserts文件加下的logo图片，然后查看效果：

出现了两个 logo 图片，第一个是在 App.vue 中使用的，第二个是在我们的 hello world 组件中使用，符合预期。

那么类推，在任何位置的组件我们可以直接在 img 标签中使用 asserts 的图片标签。

这种方法应该是静态的，因为在 Vue 中，我们不该使用 js 获取。

除去 img 标签，另一个十分重要的图片引入方法为通过 background-image 属性引用，试试看是否有效：

我们定义了一个 div 标签，占用 200x200空间，并让 background-image 引用与 img 标签相同的路径：

结果显示 div确实存在，但是背景图没有显示出来，怎么回事？

按下 F12 打开 dev tools ， 让我们检查下路径：

可以看到 img 标签的 src 变为了 /img/logo.82b9c7a5.png , 而不是我们写入的 ../assets/logo.png ,而 div 的背景路径没有发生改变，导致无法显示正确的背景图片。

通过这种方式可以了解到： img 标签的路径会被正确转换，而 background-image 不会被转换。

举一反三，我们尝试在 data 中写入路径引用：

那么这个img路径自然也不会被处理，从而无法显示。

public 文件夹在项目根目录。

根据搜索到的资料， public 文件夹不会被 webpack 处理，你用什么路径引用他就是什么，那么原理上，我们可以在 img

, background-image , data 中正确的引用它。

可以看到，在这个文件夹下直接引用了 favicon.ico 并且成功加载了。

类比，在我们的 helloworld 组件中使用：

(为了效果明显，我把logo在public文件夹下拷贝了一份)。

结果， asserts 引用与 public 引用都得到了正确的显示。

再结合之前对 asserts 的探究，通过在文件末尾添加哈希值，避免了public的命名冲突。

因为是新手，所以只能从表观来理解，希望以后随着深入能从原理上理解。

asserts 文件夹下的资源会被 webpack 处理（添加哈希值等等），导致直接引用无法找到文件。

public 文件夹下的资源不会被处理，可以直接通过路径引用。

结合之前的需求(动态与静态资源)，我总结了下面想法：