vue|vue调用服务器图片 vue|前端

一、一般VUE调用图片的方法有3种：

> //方法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) }

二、调用服务器的img
1.一般后台返回一个图片的基本位置地址，例如：

文章图片

我们可以直接使用的，例如：

文章图片

备注：为什么有的人不能使用不成功呢？这是因为图片的位置没有放对，究其原因是没有理解VUE两个资源文件的使用方法。首先src里面assets是放项目指定图片的，例如图标，logo等。而static文件是放静态资源文件的。
assets是我们必须使用的，你比如图片这些，这些图片会被编码成64位字符，这样就能加速项目。且要使用require()。
而static是一些上传图片，这些图片较大，所以一般放着，使用路径直接访问就好，如上。
所以，一般我们如果要去调用的话，还是要使用后者。
当然如果非要用src文件夹的图片也是可以的，使用：this.imgSrc = https://www.it610.com/article/require(@/assets/${data.logo_img}) 自己去拼接字符串就好。
2.如果是调用其他位置的图片
首先，设置常量