Javascript 使用AngularJs控制器动态设置背景图像_Javascript_Html_Angularjs

Javascript 使用AngularJs控制器动态设置背景图像

javascript html angularjs

Javascript 使用AngularJs控制器动态设置背景图像,javascript,html,angularjs,Javascript,Html,Angularjs,嗨，我有下面的代码来设置整个页面的背景，它工作得很好，背景图像按预期显示，但是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加载图像时，此错误类似，但对于背景，我不知道任何指令。这是

嗨，我有下面的代码来设置整个页面的背景，它工作得很好，背景图像按预期显示，但是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:

为此，可以使用ng样式

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

<>我可能会考虑使用<代码> NG风格< /C> >解决方案。

在控制器内部更改背景时，更新元素的

ng style

引用的

$scope

中的样式对象

请参阅有关

ng样式的一些信息
更新
请参阅下面的plunkr，它显示了ng样式的简单用法。选中和取消选中复选框时，背景颜色将在红色和蓝色之间变化
对于您的问题，您的myStyle
对象可以是这样的
var myStyle = {
  background: 'url(path/to/' + bgimg + ')'
}

理想情况下，您不需要每次都创建myStyle
变量，但该示例为您提供了一个如何使用该变量的简单示例
希望这能帮到你
 对元素使用ng样式
，以下是如何设置它：
ng-style="{'background-image':'url(assets/img/backgrounds/{{bgimg}})'}"

您的整个代码应该是这样的：
<body ng-style="{'background-image':'url(assets/img/backgrounds/{{bgimg}})'}">
<div class="view-container layer">
    <div ng-view></div>
</div>



<>你可以在<强> <强>中阅读更多信息，你会发现如何使用它。
你可以考虑使用<代码> NG类< /C>或<代码> NG风格< /代码>。我尝试过这个<代码> <代码>和<<代码> <代码>，但没有工作。我是否正确使用了它？请查看我的代码，您需要在url（）Ups中包含路径抱歉，但不起作用，现在结果代码是
，背景是missing@efirvida我编辑了我的答案并添加了另一种方式。试试那个。最后一个很好用，谢谢！，我编辑了完整的代码。我看了文档，但不知道该由谁来做。我已经用一个plunkr更新了我的答案，告诉你我的意思。只需选中复选框，即可看到背景颜色在红色和蓝色之间的变化。在以后的更新中，我相信您可以只做一些更改，如myStyle.background='url（…）'而不是再次创建对象。这只是一个简单的方法来向您展示它是如何工作的。您的$rootScope.myStyle
对象是什么样子的？你知道我是如何在plunker中使用它的吗？正如我在其他评论中所说，我得到了一个类似于
的HTML，现在背景丢失了，因为style=“background image:url(http://localhost:3000/assets/img/backgrounds/)“；”
没有图像URL您的html文件和图像位于何处，他们在同一个文件夹里吗？请给我们看目录树。如果资产文件夹和当前html文件位于同一目录中，我认为您可以使用。/assets/img/backgrounds/{{bgimg}}。
var bgimg = bgImagesList[Math.floor(Math.random() * bgImagesList.length)];   

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

var myStyle = {
  background: 'url(path/to/' + bgimg + ')'
}

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

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