Angular 2背景图像未呈现

Posted 2023-03-06

【中文标题】Angular 2背景图像未呈现

【英文标题】：Angular 2 background image not rendering

【发布时间】：2018-03-09 13:18:03

【问题描述】：

我有一个 Angular 2 应用程序，目前只有一个组件。 对于整个页面，我想在页面上呈现背景图像。我做了以下事情： app.component.html

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

app.component.css

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

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

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

【问题讨论】：

网址路径没问题。您可以单击样式框中的链接并使用提供的 url 打开图像

网络工具是否显示所有文件加载正确？

是的，如果 URL 未解析，我会收到编译错误，但文件没有 http 请求

【参考方案1】：

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

还有我的项目结构：

你应该使用content而不是background-image，像这样：

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

【讨论】：

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

@mcgowan.b，我已经更新了答案，再尝试帮助，它在底部（大约content），试试这个。

这会将图像覆盖在整个页面上，所以我只看到图像

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