element ui中<el-image>用:src访问动态变量加载失败问题

Question

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资源目录下面了。可是我想着我数据都可以正常获取，应该不是这个问题。希望来个厉害的人解释一下。

Answer 1

已解决，就是使用ref定义的数据在中使用是不会显示图像的，就算是给imgURL.value赋值了也是不会显示的。

    const imgURL=ref('http://localhost:8181/images/avatarImage/userAvatar/avatar.png');
        imgURL.value='http://localhost:8181/images/avatarImage/userAvatar/avatar.png';
```html

这种使用imgURL.value就是不会显示的，但是使用imgURL就可以显示了。还可以使用imgURL.valueOf()也是可以显示，可是使用控制台打印imgURL.value的值又存在且正确。到了Vue页面中又没用了。
具体什么原因也不清楚，可能涉及到ref的实现问题