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

1、本地（通常调用有三种办法）

<script>
    //方法1.直接将图片引入为模块
    require imgUrl from "../assets/test.png"

    //方法2.将imgUrl放在数据里
 data(){ return { imgUrl:require("../assets/test.png") } } //方法3.在生命周期函数中设置
 data(){ return { imgUrl:"" } } created(){ let urlTemp = "assets/test.png"; this.imgUrl = require("@/"+urlTemp) }

2、服务器调用

通常后台返回的地址是这样的

 

 咱们能够直接使用路径调用，如：

 

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

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

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

而static是一些上传图片，这些图片较大，因此通常放着，使用路径直接访问就好，如上。

因此，通常咱们若是是服务器调用“非项目必须图片（例如图标）”资源的话，仍是要使用后者。

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

首先，设置常量

 

 

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

而后调用：