关于VUE3中动态绑定img标签的src属性的问题

最新推荐文章于 2024-09-06 22:20:29 发布

liuchen_chen

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量143

点赞数 1

文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/liuchen_chen/article/details/141650803

版权

1.错误示例

<img :src='imgurl' alt=''>


const imgurl = ref('src/asset/image/xxx.png')
//绑定绝对路由虽然可以显示，但是打包后图片路径找不到

const imgurl = ref('@/asset/image/xxx.png')
//相对路由开发环境下都不会显示

2.正确做法

//给src绑定一个函数，然后把需要图片名字传给函数。
<img :src="getImageUrl(path)" alt="" />



<script setup>
const path = 'xxx.png'
//可以得到完整连接
  getImageUrl = (path) => {
    return new URL(`@/assets/img/${path}`, import.meta.url).href;
  } 
</script>