Vue3加载本地assets图片路径错误解决过程
更新时间:2026年07月01日 09:12:02 作者:王小鹏鹏
了解并正确使用图片路径、编译运行路径及代码编写路径,对于提升网站性能至关重要,本文结合个人经验,提供实用建议,助您优化网站加载速度与用户体验
错误的使用方式
const state = reactive({
sliders: [{
img: '@/assets/1.png'
},
{
img: '@/assets/1.png'
},
{
img: '@/assets/2.png'
},
{
img: '@/assets/3.png'
},
{
img: '@/assets/4.png'
}
],
currentIndex: 1,
distance: -600
})
return {
...state
}
正确的使用方式
引入图片路径参与编译
运行时的加载路径和代码编写路径不同。
import img0 from '@/assets/0.png'
import img1 from '@/assets/1.png'
import img2 from '@/assets/2.png'
import img3 from '@/assets/3.png'
import img4 from '@/assets/4.png'
export default defineComponent({
setup(){
const state = reactive({
sliders: [{
img: img0
},
{
img: img1
},
{
img: img2
},
{
img: img3
},
{
img: img4
}
],
currentIndex: 1,
distance: -600
})
return {
...state
}
}
}
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue的移动端多图上传插件vue-easy-uploader的示例代码
这篇文章主要介绍了Vue的移动端多图上传插件vue-easy-uploader的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-11
proxy代理不生效以及vue config.js不生效解决方法
在开发Vue项目过程中,使用了Proxy代理进行数据劫持,但是在实际运行过程中发现代理并没有生效,也就是说数据并没有被劫持,这篇文章主要给大家介绍了关于proxy代理不生效以及vue config.js不生效解决方法的相关资料,需要的朋友可以参考下2023-11-11


最新评论