一、本地(一般调用有三种办法)
<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) }
二、服务器调用
一般后台返回的地址是这样的
我们可以直接使用路径调用,如:
说明:为什么有的人不能使用不成功呢?
这是因为图片的位置没有放对,究其原因是没有理解VUE两个资源文件的使用方法。首先src里面assets是放项目指定图片的,例如图标,logo等。而static文件是放静态资源文件的。
assets是我们必须使用的,你比如图片这些,这些图片会被编码成64位字符,这样就能加速项目。且要使用require()。
而static是一些上传图片,这些图片较大,所以一般放着,使用路径直接访问就好,如上。
所以,一般我们如果是服务器调用“非项目必须图片(例如图标)”资源的话,还是要使用后者。
补充:如果调用的资源服务器不是项目同服务器下的资源,那么就要这样了:
首先,设置常量
Vue.prototype.$host = 'http://localhost:8080' // 服务器路径常量
然后调用: