Angular 2背景图片未渲染

Question

我是一名有用的助手，可以进行文本翻译。

我有一个Angular 2应用程序，目前只有一个组件。 对于整个页面，我想在页面上呈现一个背景图片。我已经完成了以下操作： app.component.html

<dashboard class="dash"></dashboard>

app.component.css

.dash {
    background-image: url("../assets/images/background/sligo.jpg");
}

在Chrome的开发工具中，图像显示出来了，但是在实际视图中仍然显示为空白屏幕。我错过了什么吗？ 以下片段显示了控制台输出和主视图。

附加信息；这是我的package.json和文件夹结构的片段

- Colonel Mustard

---

URL路径没问题。您可以点击样式框中的链接，使用提供的URL打开图片。 - Colonel Mustard

网络工具是否显示所有文件都正确加载了？ - 0x11

是的，如果URL没有解析，我会得到编译错误，但是文件没有发出任何HTTP请求。 - Colonel Mustard

Answer 1

你需要正确指定你的 .angular-cli.json 中的 assets 和 root 属性，例如：

我的项目结构如下图所示：

你应该使用 content 代替 background-image，像这样：

.dash {
    content: url(../assets/images/background/sligo.jpg);
}

- P.S.

---

@mcgowan.b，我看不到assets文件夹在src里面？它们之间没有父文件夹吗？ - P.S.

@mcgowan.b，我已经更新了答案，并尝试添加了更多帮助，它在底部（关于“content”），请尝试这一个。 - P.S.

这会将图像覆盖在整个页面上，因此我只能看到图像。 - Colonel Mustard

@mcgowan.b，你需要通过CSS添加一些魔法，我在我的项目中使用“content”方法，这是唯一的工作方式。尝试添加另一个“div”并将“content”属性设置为它（以及其他所需的样式）。 - P.S.