老师背景图片打包后不显示

老师背景图片打包后不显示

老师我的代码GitHub仓库:https://github.com/18845778092/bug-backgroundImage

问题:打包后不显示背景图片,这个是老师这周课程资源的代码,我直接用的老师提供的,但是打包后preview或者布置到Nginx后不显示背景图片。

尝试过程:我尝试使用img标签,打包后src是没有问题的,理应也是没问题。

    为什么img标签的src可以打包正常显示,而backgroundImage的打包后一个都出不来呢?

https://img1.sycdn.imooc.com/climg/655385800913c90525291312.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你看一下最终生成的代码,发现自定义的组件没有生效,说明自动组件导入出现了问题。


修改一下vite配置代码:

Components({
  directoryAsNamespace: true,
  collapseSamePrefixes: true,
  include: [/\.vue$/, /\.vue\?vue/, /\.md$/] // 这一行
}),

这个正则表达式用于匹配处理过程中生成的虚拟模块。


在 Vite 中,当处理 .vue 文件时,会生成一些带有查询参数的虚拟模块,例如 component.vue?vue&type=script。


这些虚拟模块代表 .vue 文件中的不同部分(如脚本、模板等)。


使用 ?vue 的匹配确保了这些虚拟模块也会被 unplugin-vue-components 插件处理。

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端高级工程师(大前端)
  • 参与学习       303    人
  • 解答问题       391    个

全新打造“技术成长&职业破局”双高体系,深度打通“全栈 + 全流程 +多端+ 提效+AI赋能”,递进式锤炼思维与高阶技能,高效实现能力跃迁,助力成为“驾驭全局,深广兼备,打通多端全栈”的高级工程师

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师