如何在 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中文網其他相關文章！