Vue3中动态设置本地图片

问题介绍：

在vue框架中，我们经常能遇到父子组件通信的问题。
如下图，意思为给父组件给子组件传递了一个叫做titile的prop，类型为字符串，值为xxxx。这样以来，我们就可以在子组件中接受这个值，并使用他。

<Son title="xxxx"></Son>

那么可以得出，下图即为父组件给子组件传递了一个本地照片的地址,其路径为assets文件夹下的bg.png图片。

<Son url="./assets/bg.png"></Son>

那么这样以来，我们是不是就可以在子组件中使用这个路径来部署本地图片了呢？

例如下面代码

<script setup>
const props = defineProps({
    url:{
        type:string
    }
})
</script>
<template>
    <img :src="url" ref="imgRef">  
</template>

然而这样行不通的，原因很简单，父组件传入的url是一个字符串，子组件需要将其转化为路径地址只后才能应用。

解决方法：

参考文献 静态资源处理 {#static-asset-handling} | Vite中文网 (vitejs.cn)

<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
    url:{
        type:string
    }
})
const imgRef = ref()
const imgUrl = new URL(props.imgUrl, import.meta.url).href
onMounted(() => {
    imgRef.value.src = imgUrl
})
</script>
<template>
    <img src="" ref="imgRef">  
</template>

我在这段代码中做了如下工作

①获取了父组件传递的url字符串，使用如下代码将其转化为路径地址，URL()中第一个参数为url字符串，第二个参数为固定值。

const imgUrl = new URL(props.imgUrl, import.meta.url).href

②通过ref获取到了img组件，然后在onMounted钩子中对img的src属性进行赋值，把①中得到的路径地址给了它

这样所有操作就完成了

注意

父组件传递给子组件的url字符串的格式必须为相对路径写法"./assets/bg.png"，不可以用@代替src。

//正确写法
<Son url="./assets/bg.png"></Son>
//错误写法
<Son url="@/assets/bg.png"></Son>