如何在 AngularJS 中动态设置背景图片而不出错？

解决 AngularJS 中的图像背景错误

在 AngularJS 中，ng-src 可以在变量求值之前防止无效 URL 错误。但是，对于 DIV 元素中的背景图像，当将变量合并到 URL 中时，使用 CSS3 的背景大小属性会带来挑战。

由于浏览器对无效图像的解释，此问题可能会导致出现大量错误消息网址。虽然使用 {{"style='background-image:url(myVariableUrl)'"}} 的粗略方法是可能的，但它不被认为是一个优雅的解决方案。

解决方案：

要解决此问题，可以使用以下 AngularJS 代码：

<code class="html"><li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li></code>

此代码使用 ng-style 指令设置背景图像，其中 URL 是从 imgURL 变量动态生成的。 '/static/' 前缀和单引号对于正确构造 URL 至关重要。通过合并此代码，您可以有效避免图像背景错误，同时通过变量保持对图像 URL 的控制。

以上是如何在 AngularJS 中动态设置背景图片而不出错？的详细内容。更多信息请关注PHP中文网其他相关文章！