离子2 scss文件中的图像
根据Where do Images go in IONIC 2和ionic changelog我应该把图像放入src/assets/img
。离子2 scss文件中的图像
这确实为<img src="assets/img/...
工作但是,它在SCSS文件中引用的图像不工作。因此,例如我可能有pages/login/login.html
具有上述图像和这样的作品,但随后pages/login/login.scss
我:
border-image: url("assets/img/...
基于一些调试,好像它试图在CSS文件从www/build/assets
加载图像,但在HTML中为www/assets
。
有什么我需要做的,以便在scss文件中正确加载图像资源?
由于样式表嵌套在传统访问页面的目录中,因此您必须在传统工作目录上方的目录中引用图像。
例如,要设置<div>
标记(如<div class="cover"></div>
)的背景图像,您应在该页面的.scss
文件中实现以下内容。
.cover{
background-image: url('../assets/img/bg.jpg');
}
编辑: 上Github离子超级入门库旨在向您展示一些页面布局和最佳实践,为您的离子2项目。
如果你看一看的.scss
stylesheet for the landing/welcome page你可以看到,背景图像被以同样的方式引用与以下行:
background: url('../assets/img/splashbg.png') no-repeat transparent;
是否有任何文件指出这一点? –
@ExplosionPills查看我刚刚对原始答案所做的编辑以获得更多支持。在driftyco和最佳实践应用程序的Ionic 2样本中,您可以看到背景图像以相同方式引用。 – timtheguy
你试过'URL(../资产/ IMG /。 ..)'? –