vite 静态资源路径

Question

急
1 new URL('/@/assets/images/allLook/run.png', import.meta.url)
2.let imgName='run' //这个实际是从接口返回的图片名称
new URL(/@/assets/images/allLook/${imgName}.png, import.meta.url)
这两种写法有什么区别，为啥第二种在页面上无法显示图片，有什么动态拼接的方法吗

Answer 1

一朵云有多重 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

第一种写法：

new URL('/@/assets/images/allLook/run.png', import.meta.url)

这种写法是直接拼接了图片的完整路径，无动态部分，可以正常显示图片。

第二种写法：

let imgName='run' //这个实际是从接口返回的图片名称
new URL(/@/assets/images/allLook/${imgName}.png, import.meta.url)

这种写法使用了动态的拼接方式，将imgName作为变量进行了拼接。但是在JS中，需要使用模板字符串（template string）的方式来进行动态拼接，即使用反引号包裹字符串，并使用`${}`来包裹变量。在你提供的代码中缺少了模板字符串的标识，导致无法正确拼接图片路径，因此无法显示图片。

解决方案：

1. 使用模板字符串来拼接变量和字符串，即在第二种写法中加入反引号``和${}，如下所示：

let imgName='run' //这个实际是从接口返回的图片名称
new URL(`/@/assets/images/allLook/${imgName}.png`, import.meta.url)

这样就可以正确拼接图片路径，并显示图片了。

1. 使用字符串拼接的方式，即将变量和字符串通过加号+进行拼接，如下所示：

let imgName='run' //这个实际是从接口返回的图片名称
new URL('/@/assets/images/allLook/' + imgName + '.png', import.meta.url)

这样也可以正确拼接图片路径，并显示图片。

综上所述，要解决第二种写法无法显示图片的问题，需要使用模板字符串或字符串拼接的方式来进行动态拼接。