vite+vue3打包后图片404问题:已解决
vite+vue3 打包 图片找不到404问题
·
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
}
更多推荐
已为社区贡献2条内容
所有评论(0)