Vue3加载本地assets图片路径错误

原创已于 2024-11-25 10:28:59 修改 · 5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #开发语言

于 2020-10-29 10:24:54 首次发布

前端专栏收录该内容

4 篇文章

订阅专栏

本文讨论了在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
        }
    }
}