关于在img标签的src里面直接使用“~/assets/images/xxx“可以，但是若将这个路径写成变量的形式就会报错

今天在写Nuxt项目的时候遇到了一个问题，就是在引用图片资源的时候，如果是直接使用这样形式就可以

javascript 复制代码

<img src="~/assets/images/circle.png" class="w-[100%] h-[100%]"></img>

但如果把图片的路径单独提出来写成一个变量就会报错，就像这样

javascript 复制代码

<img :src="props.image" class="w-[100%] h-[100%]"></img>

const props = defineProps({
    image:{
        type:String,
        default:() => ``
    }
}）

这是因为~其实是webpack的路径别名，浏览器在解析的时候会报错，所以这种时候建议最好使用import或者require的形式

javascript 复制代码

import circleImage from "~/assets/images/circle.png"

const circleImage = requie("~/assets/images/circle.png")

但是还有一个问题也要注意啊，后面的路径建议使用单引号或者双引号，不要使用反引号，因为我在使用反引号的时候也要报错