elment ui的访问动态变量加载失败问题
从后端拿到的数据是 一个本地服务器的一个图片地址:http://localhost:8181/images/avatarImage/userAvatar/avatar.png
这个可以在本地上用浏览器直接访问,并且可以显示出来。
这是我的Vue页面代码,用的是element ui:
<el-image :src="'http://localhost:8181/images/avatarImage/userAvatar/avatar.png'"/>
<el-image :src="imageUrl.value" loading="eager"/>
第一个可以正常显示,可是用的变量就加载失败:
下面是我的js代码
const imageUrl = ref('http://localhost:8181/images/avatarImage/userAvatar/avatar.png');
const data=reactive({
imageId:"JBRAczEyRsVcIABI",
type:"userAvatar"
})
getImageUrl(data).then(url=>{
imageUrl.value=url
})
console.log("imageUrl.value:")
console.log(imageUrl.value)
//这里是 getImageUrl
export async function getImageUrl (data) {
console.log("data:")
console.log(data)
await $http.post(selectHttpName,{data}).then((res)=> {
console.log("res:")
console.log(res)
return res;
}).catch(error=>{
console.log(error)
})
return "http://localhost:8181/images/avatarImage/userAvatar/avatar.png"
}
查了很多文章,也查看我element ui的Api没找到什么错误,也问了像c知道这种的,都说有可能是跨域资源访问,数据接收问题。可是我的数据已经有了,本地服务器也可以访问。所以觉得可能是跨域资源访问,因为我把图片放到了springBoot项目的resource/static/images/avatarImage/userAvatar资源目录下面了。可是我想着我数据都可以正常获取,应该不是这个问题。希望来个厉害的人解释一下。