gpt4 book ai didi

javascript - 使用 AngularJs Controller 动态设置背景图像

转载 作者:太空宇宙 更新时间:2023-11-04 14:01:23 25 4
gpt4 key购买 nike

您好,我有以下代码将背景设置为整个页面,它工作正常,背景图像按预期显示,但 chrome 控制台显示此错误

GET http://localhost:3000/assets/img/backgrounds/%7B%7Bbgimg%7D%7D 404 (Not Found)
GET http://localhost:3000/assets/img/backgrounds/ 404 (Not Found)

当使用 src 而不是 ng-src 加载图像时,此错误类似,但对于背景,我不知道任何指令。这是我的代码

HTML:

<body background="assets/img/backgrounds/{{bgimg}}">
<div class="view-container layer">
<div ng-view></div>
</div>

Controller

    var bgImagesList = ['01.jpg',
'02.jpg', '03.jpg', '04.jpg',
'05.jpg', '06.jpg', '07.jpg',
'08.jpg', '09.jpg', '10.jpg',
'11.jpg'];

var changeBaclground = function () {
$rootScope.bgimg = bgImagesList[Math.floor(Math.random() * bgImagesList.length)];
};

最佳答案

你可以使用 ng-style 来达到这个目的

<body ng-style="{'background-image':'url(assets/img/backgrounds/{{bgimg}})'}" > 

其他简单的方法是
HTML:

<body ng-style="setBackground()" >

在 Controller 中:

var bgimg = bgImagesList[Math.floor(Math.random() * bgImagesList.length)];   

$rootScope.setBackground = function(){
return {
'background-image':'url(assets/img/backgrounds/' + bgimg + ')'
}
}

关于javascript - 使用 AngularJs Controller 动态设置背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32400843/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com