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
        }
    }
}