Vue3加载本地assets图片路径错误解决过程
作者：王小鹏鹏
了解并正确使用图片路径、编译运行路径及代码编写路径,对于提升网站性能至关重要,本文结合个人经验,提供实用建议,助您优化网站加载速度与用户体验
错误的使用方式
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
}
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。