vite+vue3打包后图片404问题：已解决

Oneself_lsl

已于 2022-02-10 11:45:37 修改

阅读量6.4k

点赞数 5

分类专栏： vue3 vite 文章标签： vue

于 2022-01-19 13:36:53 首次发布

本文链接：https://blog.csdn.net/qq_45503103/article/details/122578980

版权

vue3 同时被 2 个专栏收录

3 篇文章 1 订阅

订阅专栏

vite

1 篇文章 0 订阅

订阅专栏

let content = [{title:"每周菜单",cont:[
                                        {url:"/procurementchildren/meke_menu",name:"菜单查询",imgSrc0:getImageUrl("ic_12_h"),states:false,imgSrc1:getImageUrl("ic_13_h")},
                                        {url:"/procurementchildren/weekly_menu", name:"菜单制作",imgSrc0:getImageUrl("ic_14_h"),states:false,imgSrc1:getImageUrl("ic_15_h")},
            ]},
              {title:"菜谱管理",cont:[
                                        {name:"早餐菜谱",imgSrc0:getImageUrl("ic_16_h"),states:false,imgSrc1:getImageUrl("ic_17_h")},
                                        {name:"中餐菜谱",imgSrc0:getImageUrl("ic_18_h"),states:false,imgSrc1:getImageUrl("ic_19_h")},
                                        {name:"晚餐菜谱",imgSrc0:getImageUrl("ic_20_h"),states:false,imgSrc1:getImageUrl("ic_21_h")},
                                        {name:"夜宵菜谱",imgSrc0:getImageUrl("ic_22_h"),states:false,imgSrc1:getImageUrl("ic_23_h")},
            ]},
              {title:"采购下单",cont:[
                                        {name:"日用品采购",imgSrc0:getImageUrl("ic_24_h"),states:false,imgSrc1:getImageUrl("ic_25_h")},
                                        {name:"食材采购",imgSrc0:getImageUrl("ic_26_h"),states:false,imgSrc1:getImageUrl("ic_27_h")},
                                        {name:"采购配货",imgSrc0:getImageUrl("ic_28_h"),states:false,imgSrc1:getImageUrl("ic_29_h")},
            ]},
              {title:"收货管理",cont:[
                                        {name:"验货收货",imgSrc0:getImageUrl("ic_30_h"),states:false,imgSrc1:getImageUrl("ic_31_h")},
                                        {name:"收货台账",imgSrc0:getImageUrl("ic_32_h"),states:false,imgSrc1:getImageUrl("ic_33_h")},
            ]},
              {title:"库存管理",cont:[
                                        {name:"入库",imgSrc0:getImageUrl("ic_34_h"),states:false,imgSrc1:getImageUrl("ic_35_h")},
                                        {name:"出库",imgSrc0:getImageUrl("ic_36_h"),states:false,imgSrc1:getImageUrl("ic_37_h")},
                                        {name:"库存盘点",imgSrc0:getImageUrl("ic_38_h"),states:false,imgSrc1:getImageUrl("ic_39_h")},
            ]},
        ]
//修改数据
function getImageUrl(name) {
  return new URL(`/src/assets/${name}.png`, import.meta.url).href
}

使用vite官网得

new URL(`/src/assets/${name}.png`, import.meta.url).href

这个代码，本地运行正常，打包后图片404。请问下有遇到过这个问题得吗。
在这里插入图片描述
已解决：解决方案，图片静态资源需要放在public文件夹下面。并且使用官方方法时下面的路径不加public。
实现代码

let content = [{title:"每周菜单",cont:[
                                        {url:"/procurementchildren/menuSearch",name:"菜单查询",imgSrc0:getImageUrl("ic_12_h"),states:false,imgSrc1:getImageUrl("ic_13_h")},
                                        {url:"/procurementchildren/menuMake", name:"菜单制作",imgSrc0:getImageUrl("ic_14_h"),states:false,imgSrc1:getImageUrl("ic_15_h")},
            ]},
              {title:"菜谱管理",cont:[
                                        {url:"/procurementchildren/menuManage?1",name:"早餐菜谱",imgSrc0:getImageUrl("ic_16_h"),states:false,imgSrc1:getImageUrl("ic_17_h")},
                                        {url:"/procurementchildren/menuManage?2",name:"中餐菜谱",imgSrc0:getImageUrl("ic_18_h"),states:false,imgSrc1:getImageUrl("ic_19_h")},
                                        {url:"/procurementchildren/menuManage?3",name:"晚餐菜谱",imgSrc0:getImageUrl("ic_20_h"),states:false,imgSrc1:getImageUrl("ic_21_h")},
                                        {url:"/procurementchildren/menuManage?4",name:"夜宵菜谱",imgSrc0:getImageUrl("ic_22_h"),states:false,imgSrc1:getImageUrl("ic_23_h")},
            ]},
              {title:"采购下单",cont:[
                                        {name:"日用品采购",imgSrc0:getImageUrl("ic_24_h"),states:false,imgSrc1:getImageUrl("ic_25_h")},
                                        {name:"食材采购",imgSrc0:getImageUrl("ic_26_h"),states:false,imgSrc1:getImageUrl("ic_27_h")},
                                        {name:"采购配货",imgSrc0:getImageUrl("ic_28_h"),states:false,imgSrc1:getImageUrl("ic_29_h")},
            ]},
              {title:"收货管理",cont:[
                                        {name:"验货收货",imgSrc0:getImageUrl("ic_30_h"),states:false,imgSrc1:getImageUrl("ic_31_h")},
                                        {name:"收货台账",imgSrc0:getImageUrl("ic_32_h"),states:false,imgSrc1:getImageUrl("ic_33_h")},
            ]},
              {title:"库存管理",cont:[
                                        {name:"入库",imgSrc0:getImageUrl("ic_34_h"),states:false,imgSrc1:getImageUrl("ic_35_h")},
                                        {name:"出库",imgSrc0:getImageUrl("ic_36_h"),states:false,imgSrc1:getImageUrl("ic_37_h")},
                                        {name:"库存盘点",imgSrc0:getImageUrl("ic_38_h"),states:false,imgSrc1:getImageUrl("ic_39_h")},
            ]},
        ]
//修改数据
        function getImageUrl(name) {
  return new URL(`/${name}.png`, import.meta.url).href
}