如何在将 vue 应用程序部署到 gh-pages 时修复背景图像的路径？

Question

我正在将我的 vue-app 部署到 gh-pages 并面临加载背景图像的问题。

这是我的项目的结构

而这里链接到我的项目上GH-页面生活。
您可以看到来自 img 标签的图像正在加载，svg 文件也在加载，但不是 svg 的背景图像没有（我所有的背景图像都在 img 文件夹中）。

我可以在控制台中看到哪些路径搞砸了——它们应该是，static/img/footer.88ceaa2.png但它们是static/css/static/img/footer.88ceaa2.png

我的组件中的背景路径应该不同还是我的配置文件中的某些内容？任何帮助都感激不尽。

链接到回购

Answer 1

我对 Nuxt 有同样的问题，有一种方法可以通过将样式绑定为内联来解决

:style="{ backgroundImage: 'url(' + require('@/assets/imgs/assets/img/header.png') + ')' }"