Ionic2背景图像不会出现在设备上

Question

我在我的Ionic2应用程序中设置了一个自定义类.categories e，以便使用自定义背景设置它。背景的CSS是：

.categories {
  background: url('../../assets/img/dark.jpg');
  background-size: cover;
}

Chrome中的一切工作都很好（使用离子服务），但是当我在设备上构建和运行时，我看到的只是纯白色背景。 我已经尝试将背景图像的路径调整为assets / img / dark.jpg，但没有运气。如果有人可以帮助我，我将非常感谢你的帮助。

提前谢谢

Answer 1

好吧我认为您所要做的就是将URL更改为

background-image: url('../assets/img/dark.jpg');

Answer 2

有关背景图像问题的背景信息

Ionic似乎会占用您所有的scss文件，进行转译并将它们合并为一个巨大的css文件 （main.css）存储在{project}/www/build/目录中。

如果您的背景图片最初位于{project}/src/assets/img/目录中，则会将它们复制到{project}/www/assets/img/中。

因此，无论您的源scss文件位于 src 目录树中的何处或深度如何（通常为{project}/src/pages/{pagename}/{pagename}.scss），您都需要考虑参考图像的路径相对于 build 目录，而不是scss文件的目录。

使用>ionic lab在桌面浏览器上测试应用程序时，绝对路径也将起作用，例如：

background-image: url('/assets/img/dark.jpg');

但是根据我的经验，这在实际设备或仿真器中均不起作用。所以不要使用它。

正如Bouzafour Mohamed所述，您需要使用以下格式来引用背景图片。

background-image: url('../assets/img/dark.jpg); 

Answer 3

链接不会像你使用的那样 它必须像文件的相对路径

例如你的文件在

src > pages > example >example.scss 

然后你必须使用图像路径作为

.categories {
background: url('../../assets/img/dark.jpg');
background-size: cover;
}