用require导入图片有什么缺点吗?

用这种方式导入图标和写成 background 用 class 来切换有什么最佳实践吗?

`

        resourceType: {
            audio: {
                name: '音频',
                image: require('../../assets/audio.png'),
            },
            media: {
                name: '图片',
                image: require('../../assets/img.png'),
            },
            wk: {
                name: '微课',
                image: require('../../assets/wk.png'),
            },
            vedio: {
                name: '视频',
                image: require('../../assets/wk.png'),
            },
            ppt: {
                name: 'ppt',
                image: require('../../assets/ppt.png'),
            },
            word: {
                name: 'word',
                image: require('../../assets/word.png'),
            },
            pdf: {
                name: 'pdf',
                image: require('../../assets/pdf.png'),
            },
            txt: {
                name: 'txt',
                image: require('../../assets/txt.png'),
            },
            image: {
                name: '图片',
                image: require('../../assets/img.png'),
            },
            excel: {
                name: 'excel',
                image: require('../../assets/excel.png'),
            },
            default: {
                name: 'unknown',
                image: require('../../assets/excel.png'),
            },
        },

`

已解决 悬赏分:0 - 解决时间 2021-11-25 20:05
反对 0举报 0 收藏 0

回答3

最佳
  • @

    如果图标都是位图的话你这样写基本上就算最佳实践了(base64可以靠打包工具自动处理,webp在iphone上不兼容慎用),雪碧图性能是会更好一点但用起来很麻烦
    如果是矢量图的话可以用iconfont

    支持 0 反对 0 举报
    2021-11-25 11:12
  • @

    这样会转成base64的 可以省去一次请求。图片小的话 也可以换成雪碧图,或者把图片转成理小容量的webp

    支持 0 反对 0 举报
    2021-11-25 12:12
  • @

    你们都讲的好深奥,我只知道加载的时候有点慢,而且v-for时不是同时刷出来的

    支持 0 反对 0 举报
    2021-11-25 12:41