离子2 scss文件中的图像

Question

根据Where do Images go in IONIC 2和ionic changelog，我应该将图片放入src/assets/img。

这适用于<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文件中正确加载，我还需要做些什么吗？

Answer 1

您必须在传统工作目录上方的目录中引用您的图像，因为您的样式表嵌套在传统访问该页面的目录中。

例如，要设置<div>标记的背景图片，例如<div class="cover"></div>，您需要在该页面的.scss文件中实施以下内容。

.cover{
    background-image: url('../assets/img/bg.jpg');
}

修改 Github上的Ionic Super Starter 存储库旨在向您展示Ionic 2项目的一些页面布局和最佳实践。

如果您查看.scss stylesheet for the landing/welcome page，可以看到背景图像的引用方式与以下行相同：

     background: url('../assets/img/splashbg.png') no-repeat transparent;