当前位置: 首页 > 面试题库 >

angularjs:ng-src等效于background-image:url(…)

林运浩
2023-03-14
问题内容

在angularjs中,您具有标记ng-src,其目的是在angularjs评估介于{{和之间的变量之前,不会收到无效网址的错误}}

问题是,我使用了一些带有background-imageURL设置的DIV 。我之所以这样做,是因为CSS3具有出色的属性background- size,可以将图像裁剪为DIV的确切大小。

唯一的问题是,由于创建ng-src标记的原因完全相同,因此我收到很多错误:我的url中有一些变量,浏览器认为该图像不存在。

我意识到有写粗略的可能性{{"style='background-image:url(myVariableUrl)'"}},但这似乎是“肮脏的”。

我已经搜索了很多,却找不到正确的方法。由于所有这些错误,我的应用变得一团糟。


问题答案:

ngSrc是一个本机指令,因此您似乎想要一个类似的指令来修改div的 background-image样式。

您可以编写自己的指令来实现您想要的功能。例如

app.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        element.css({
            'background-image': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };
});​

您将这样调用

<div back-img="<some-image-url>" ></div>


 类似资料:
  • 令人困惑的是,“background”也经常被用来简单地表示“Android:src使用的照片的‘背景颜色’”。 说我有。 我将更改SetColorFilter。 但是背景只是一个普通的按钮背景,实际上带有一些透明度等等。 所以我想不影响背景;我只会为不同的按钮改变“大点的颜色”。 请注意:(一)由于setColorFilter的微妙之处,从测试中很难确定;(二)我在doco中真的找不到这一点(对

  • 本文向大家介绍Android ImageView Src 和Background 区别,包括了Android ImageView Src 和Background 区别的使用技巧和注意事项,需要的朋友参考一下 之前使用Glide的时候被ImageView的图片设置弄混了(很低级的问题,确是经常犯的问题),所以就去看了一下ImageView,补补基础。 首先ImageView有两个显示图片的属性,分别

  • 问题内容: 我正在从xml配置转移到注释。我想转换一个会话范围的bean是 可以通过注释完成此操作吗?如果没有,我该怎么做才能使该声明继续工作? 问题答案: 在spring上下文xml中,执行以下操作: 请注意,尽管如此,你将需要为该包中的所有类编写接口。

  • 问题内容: 我有一个包含许多页面和不同背景图片的网站,并且通过CSS显示它们,例如: 但是,我想使用元素在一页上显示不同的(全屏)图片,并且我希望它们具有与上述属性相同的 属性(图像不能从CSS中显示,它们必须从HTML文档中显示)。 通常我使用: 要么: 使图片饱满且反应灵敏。但是,当屏幕太窄时,图片会缩小太多(),并在底部屏幕上显示主体的背景色。另一种方法,只能使图像变为全尺寸,而不响应屏幕尺

  • 问题内容: 我有一个包含许多页面和不同背景图片的网站,并且通过CSS显示它们,例如: 但是,我想使用元素在一页上显示不同的(全屏)图片,并且我希望它们具有与上述属性相同的 属性(图像不能从CSS显示,它们必须从HTML文档显示)。 通常我使用: 要么: 使图片饱满且反应灵敏。但是,当屏幕变得太窄时,图片会缩小太多(),并在底部屏幕上显示主体的背景色。另一种方法只能使图像变大,而不响应屏幕大小。 有

  • 问题内容: 该表示法是: 实际上不哈希对象;它实际上只是转换为字符串(通过它是一个对象,还是其他各种原始类型的内置转换),然后在“ ”中查找该字符串,而不对其进行哈希处理。也不会检查对象是否相等-如果两个不同的对象具有相同的字符串转换,则它们将彼此覆盖。 鉴于此-在JavaScript中是否有任何有效的hashmap实现?(例如,第二个Google结果产生的实现对任何操作都是O(n)。其他各种结果