vue 调用图片（服务器和本地）

系统管理员 2022-12-18 10:53 192阅读 0赞

一、本地（一般调用有三种办法）

二、服务器调用

一般后台返回的地址是这样的

![6c02dc9bf70b66a90ea8df819380ce41.png][]

我们可以直接使用路径调用，如：

![1a632252e74f0ec98adf2a5aee0e1f8c.png][]

说明：为什么有的人不能使用不成功呢？

这是因为图片的位置没有放对，究其原因是没有理解VUE两个资源文件的使用方法。首先src里面assets是放项目指定图片的，例如图标，logo等。而static文件是放静态资源文件的。

assets是我们必须使用的，你比如图片这些，这些图片会被编码成64位字符，这样就能加速项目。且要使用require()。

而static是一些上传图片，这些图片较大，所以一般放着，使用路径直接访问就好，如上。

所以，一般我们如果是服务器调用“非项目必须图片（例如图标）”资源的话，还是要使用后者。

**补充：如果调用的资源服务器不是项目同服务器下的资源，那么就要这样了：**

首先，设置常量

![95e3a0eb796aca2fdfe9a8f361b2a21a.png][]

Vue.prototype.$host = 'http://localhost:8080' // 服务器路径常量

然后调用：

![13f06b6a11304e642780fee0b64c7b28.png][]

参考文章：[https://www.cnblogs.com/linzhifen5/p/11771662.html][https_www.cnblogs.com_linzhifen5_p_11771662.html]

[6c02dc9bf70b66a90ea8df819380ce41.png]: /images/20221122/20f558d519264018b01b1ce2fe10953a.png
[1a632252e74f0ec98adf2a5aee0e1f8c.png]: /images/20221122/d18c596aa8424c5faec322fe0d495d29.png
[95e3a0eb796aca2fdfe9a8f361b2a21a.png]: /images/20221122/a2ad1dbe93c640cb8e7443984e3b6e26.png
[13f06b6a11304e642780fee0b64c7b28.png]: /images/20221122/382cf23915ed45b082512876646ff4e8.png
[https_www.cnblogs.com_linzhifen5_p_11771662.html]: https://www.cnblogs.com/linzhifen5/p/11771662.html