vue3中导入图片使用@/.....失效，使用import有效

先看下面的代码：

// script
let userAvatar='@/assets/user.png'

// tempalte
<img  :src="userAvatar" >

在写一个项目时，我就是直接这样写的，但是发现图片加载不出来！

用F12检查之后发现，src的路径如下所示：

emmm，这。。。。在vue中，我们为了简化路径，在vite.config.ts配置了用@代替src，在解析之后，@应该要变回src，但这里没有，还是@，所以图片路径没有正确解析出来，导致图片加载不出来。

 resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') 
    }
  }

出现上述问题的原因可能是：userAvatar是一个字符串变量，Vue在解析这个路径时不会自动将@/转换成正确的相对路径.

解决办法：使用import导入

import userAvatar from '@/assets/user.png';

图片路径正确显示，图片加载出来了。

如果本文对你有帮助，希望能得到你的点赞或收藏或关注，这是对我最好的鼓励；

如你有问题或疑惑，欢迎在评论区写下，必将努力解答；

如本文有误区，希望你不吝赐教，让我们共勉！