如何使用img元素与angularJS进行数据绑定
使用img元素与AngularJS进行数据绑定可以通过以下步骤实现：
- 在HTML中，使用img元素来显示图片：
<img ng-src="{{ imageUrl }}" alt="Image">在这里，ng-src是AngularJS的指令，用于动态绑定图片的URL。{{ imageUrl }}是一个表达式，用于获取图片的URL。
- 在AngularJS的控制器中，定义一个变量来存储图片的URL：
app.controller('ImageController', function($scope) {
$scope.imageUrl = 'path/to/image.jpg';
});在这里，$scope.imageUrl是一个作用域变量，用于存储图片的URL。
- 在应用中加载AngularJS库，并将控制器与HTML元素进行关联：
<body ng-app="myApp" ng-controller="ImageController">
<!-- 图片元素 -->
<img ng-src="{{ imageUrl }}" alt="Image">
<!-- AngularJS库 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<!-- 应用脚本 -->
<script src="app.js"></script>
</body>在这里，ng-app="myApp"将应用与AngularJS模块进行关联，ng-controller="ImageController"将控制器与HTML元素进行关联。
这样，当控制器中的imageUrl变量发生变化时，img元素的src属性也会相应地更新，从而实现了数据绑定。
推荐的腾讯云相关产品：腾讯云对象存储（COS）
- 概念：腾讯云对象存储（COS）是一种海量、安全、低成本、高可靠的云存储服务，适用于存储和处理任意类型的文件。
- 分类：云存储服务
- 优势：高可靠性、低成本、安全性高、支持多种数据处理功能
- 应用场景：网站和应用程序的静态资源存储、大规模数据备份和归档、多媒体内容存储和分发等。
- 产品介绍链接地址：腾讯云对象存储（COS）
请注意，以上答案仅供参考，具体的实现方式可能因应用环境和需求而有所不同。
相关·内容
如何实现显示图像和视频的滑块的思想.
如何通过不同数据类型的ng重复获得重复？
我有一个文件列表：
var scr = [
{src: 'img1.png', title: 'Pic 1'},
{src: 'img2.jpg', title: 'Pic 2'},
{src: 'vid1.mp4', title: 'Vid 1'},
{src: 'vid2.mp4', title: 'Vid 2'}
];
图像可以通过ng-重复：插入。
<div class=
浏览 2提问于2014-04-17得票数 1
回答已采纳
1回答
我使用具有这种结构的angularJs创建了一个小的铬扩展
extension/
statics/
css/
js/
lib/
app/
api/
img/
views/
partials/
所有包含angularJs功能的Js文件都在js/app文件夹中，所有与chrome相关的文件都在js/api文件夹中。在清单json文件中
"default_popup": "popup.html#/popup"
帮助我
浏览 2提问于2014-08-23得票数 2
回答已采纳
这就是我的问题，下面是我的示例代码。
HTML：
<a class="fancybox" rel="group" href="img1.jpg"> <img src="img1_thumb.jpg"> </a>
<a class="fancybox" rel="group" href="img2.jpg"> <img src="img2_thumb.jpg"> </a>
JS：
var head
浏览 0提问于2012-09-14得票数 7
回答已采纳
2回答
我是AngularJS的新手，所以我仍然试图掌握最佳实践和做事的“角力方式”。话虽如此，我的情况如下：
我正在尝试提交一份AngularJS表格。表单的一部分是我希望用户从中选择的博客名称列表。每个<li>内部都有一个复选框。当用户单击li时，我希望选中复选框，以便在表单提交时，它记录选定的博客名称。
<li>
<div>
<img ng-src="{{ image }}" />
</div>
<div>
{{ name }}
</div
浏览 1提问于2016-08-17得票数 1
回答已采纳
1回答
我的角度控制器看起来是这样的：
angular.module('spark')
.controller('MainCtrl', ['$scope', '$location', function ($scope,$location) {
$scope.handleThisElement = function (event) {
alert(event.target.id);
}
$scope.changeView = function(view){
浏览 1提问于2014-11-10得票数 0
回答已采纳
我愿意接受一些建议，因为我在AngularJS方面不太擅长。我想隐藏图像框并得到图像的id。
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<div class="my-gallery" itemscope id="grid" >
<div ng-repeat="imageUrl in im
浏览 1提问于2017-02-05得票数 0
回答已采纳
我在Angular设置中有一个表单，如下所示。
用户可以进行更改并一次提交一个，它可以按预期工作，但我想添加一个"Submit All“，它将每次提交一个项目，就像用户按下每个项目的submit按钮一样。我在做这件事的最好方法上有点困惑。到目前为止，由于API的限制，我不能将它们作为批提交。我也想把jQuery排除在方程式之外。
我的第一个想法是创建一个新的对象，其中包含每个项目的信息，然后循环它并以这种方式提交。我不确定如何在我的控制器中设置它。
<div class="table-responsive">
<table class=&#
浏览 2提问于2015-05-12得票数 2
当绑定一个AngularJS与绑定一个model with a non-input元素(例如div)时，model to an input数据绑定有什么区别？
浏览 0提问于2015-09-02得票数 1
回答已采纳
我试图加载框架中的链接，当我悬停它们，但没有工作。如果我使用这个函数，我在页面上创建的任何链接都是有效的，但当我使用它时，动态创建的链接是不起作用的。
这是在页面上创建的数据
$('#user-tweets').append('<table class="tweets" width="320" border="0"><tr><td rowspan="1">' +
user + '</td><td rowspan="1"
浏览 0提问于2012-09-02得票数 0
回答已采纳
1回答
我有如下数据。有两种类型的问题，一种是以图片为答案，另一种是有选项作为答案。
$scope.data = [
{'question': "Select one.", 'pic': false,
'answer': [
{"option": "8", "correct": false},
{"option": "14", "correct":
浏览 2提问于2014-10-25得票数 0
回答已采纳
我是AngularJS的新手，这是我的controller.js文件的一部分，我让登录控制器使用与此相同的服务。
我现在想要实现的是使用我的服务中的不同方法从AJAX调用中获取数据，并将其像这样传递给我的HTML。
这样做的正确方式是什么？这就是我所尝试的，我基于我之前的Chrome打包应用程序项目编写了这段代码。不同的是，在我的第一个项目中，我有一个单独的javascript文件来改变我的HTML中的显示，这一次，我通过控制器，服务和应用来操纵它。
.controller('VFCtrl', function($scope, $stateParams, $http, $ion
浏览 1提问于2016-04-23得票数 2
我有这样的代码：(JADE语法)
select(ng-model="eventTypeUI")
option(ng-repeat="c in eventUI", ng-value='c.value',
ng-disabled='selectEventCanNotBeUsed(c.value)') {{c.name}}
我在select中不使用ng-选项，因为我需要动态启用/禁用禁用ng调用的单个列表。
EventUI具有以下结构：
[ { "name"
浏览 3提问于2014-10-29得票数 0
请帮助我解决以下问题：
<!-- this is the visible code -->
<div id="divid">{some default content}<img class="img" src="GoNextArrow.jpg" alt=""></div>
<!-- this is a hidden list of contents -->
<div style="display: none;">
<div id
浏览 1提问于2011-01-23得票数 1
回答已采纳
我有一个聊天指令，我已经放置在我的页面上的三个不同的地方。我这样做是出于响应的原因，根据引导程序的类(可见的-xs，隐藏的-xs，等等)在不同的地方显示聊天按钮。我已经将指令中的单击事件附加到chat按钮。问题是，这是对每个指令实例开火，我希望它只开火一次。下面是一些代码片段。任何帮助都将不胜感激。提前谢谢。
<div eb-chat
class="chatBtn hidden-xs hidden-sm">
<img src="../common/images/chat.gif" alt="Live Chat"
浏览 3提问于2015-07-08得票数 1
回答已采纳
1回答
我有一个gallery.php，它从数据库中加载带有src路径的图像。
我还拥有一个外部main.js来检测对.thumbnail的单击。
所有工作都完美无缺，直到我通过ajax加载不同的图像(另一类图像，另一组)。(jquery的load()函数)一切都显示得很好，但是javascript出现了一个问题。
之后，我无法检索缩略图的src属性。我的意思是。
AJAX之前的
第1类图片/缩略图
<a class="thumbnail"><img src="ressources/images/image1Small.jpg" /></a
浏览 4提问于2011-06-15得票数 0
回答已采纳
我试图了解如何阻止DOM元素将数据绑定到范围中。
我知道你可以用if语句来完成这个任务，但是是否有一种真正的永久的方法来停止绑定元素的角度，但是保留添加的内容呢？
所以说我有这个
<div ng-bind="content" class="ng-binding">Welcome</div>
我改变模型，让div改变到这个。
<div ng-bind="content" class="ng-binding">Welcome World</div>
然后单击将解除绑定
浏览 7提问于2013-08-14得票数 18
回答已采纳
任何一个人都可以帮助我理解在简单代码的帮助下AngularJS中的双向数据绑定到底意味着什么吗？
浏览 4提问于2015-06-02得票数 0
回答已采纳
你好，我面临的问题是使Li成为活动选项卡，我已经添加了悬停效果，但是如何添加活动选项卡？我用户的角度是ng显示和ng隐藏，以改变图标在李。这是我的密码
<li ng-mouseenter="show = true" ng-mouseleave="show = false" id="home">
<img src="images/home.png" ng-hide="show" class="whiteClass" />
<img src=
浏览 1提问于2014-07-03得票数 2
回答已采纳
我写了这段代码。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.hobby='AngularJS';
});
app.directive('outputText',function(){
return {
transclude: true,
scope: {},
template: &#
浏览 2提问于2014-09-30得票数 0
回答已采纳
我刚接触过角，除了经典的ng模型场景(模型值反映在视图中)之外，还不清楚在哪里需要双重数据绑定。
例如，对于ng-重复变量，我需要双重绑定吗？或者，对于可以在$watch中更改的变量，我需要它吗？
我读到单向数据绑定可以有显著的性能改进，所以我不想使用双重数据绑定，除非我真的需要它。
例如
<img ng-src="{{mySrc}}"> or
<img ng-src="{{::mySrc}}">
<div ng-repeat="item in items"> or
<div ng-repeat=
浏览 2提问于2015-02-06得票数 0
回答已采纳
我选择将元素绑定到正文，让它们影响元素，即使它们还没有出现。现在，我想在执行过程中解除一些处理程序的绑定，这就是我遇到一些困难的地方。
代码：
$('body').unbind('click', deleteComment); //unbind
$('body').on('click', '.deleteCommentButton > img', deleteComment); //binding
问题是我应该如何专门为.deleteComment > img解绑它
浏览 0提问于2012-07-13得票数 0
我有一个名为edResults的父组件。该组件负责从API中提取数据并在表中显示数据。
表的一部分是名为profileImageScroller的子组件。此组件负责在自定义滚动器组件中输出配置文件图像。
我试图将概要文件图像作为一个数组从edResults传递到profileImageScroller，但没有运气。由于某种原因，profileImageScroller没有看到图像数组。
以下是我的代码的相关部分：
edResults.html：
<img src="{{$ctrl.images[0]}}"> <!--This does work and out
浏览 2提问于2017-05-10得票数 0
回答已采纳
我在尝试使用if和重复语句时有困难。
我正在获取数据，如下所示：
modules: Array[1]
0: Object
embed: "<iframe width="600" height="338" src="https://www.youtube.com/embed/UqdDAn4_iY0"
frameborder="0" allowfullscreen="" style="margin:0px auto;display:block;
浏览 2提问于2014-10-17得票数 13
回答已采纳
1回答
在我的应用程序中，我有这样的看法：
<div class="r-container" image-crop>
<img id="photo-cropper" src="">
</div>
用于图像的src正在控制器中设置(在图像绘制到浏览器之后)：
$scope.files = files;
var reader = new FileReader();
reader.onload = function(e) {
$('#photo-croppe
浏览 3提问于2015-01-29得票数 1
回答已采纳
我有一张9栏的桌子。我想要做的是，使用knockoutjs显示三个图像中的一个，这取决于某些列是否为null。下面的代码显示了我最近的一次凌乱，但是它将所有3幅图像放置在单元格中，就好像所有返回为真的东西一样。
<tbody data-bind="foreach:xrefs">
<tr>
<td>
@*<img data-bind="if: API14 == null || PROP_NM == null || PROD_ZONE_NM == null || LEASE_NA
浏览 1提问于2017-03-06得票数 1
回答已采纳
我有一个简单的指令，显示三个图像。鼠标悬停时，应从黑白图像切换到正常图像。下面是指令中的代码。
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>
Example 1</h3>
<div class="fd-fade1 fd-effect">
&
浏览 0提问于2014-07-31得票数 3
回答已采纳
我正在编写一个指令来创建一个子菜单。
我的想法是使这个指令相当灵活，这样我就可以在需要的时候重用它。
基本概念如下：
<my-submenu>
<li my-function="test()">Test</li>
<li my-function="test2()">Test 2</li>
<li my-function="test3(id, type)">Test 3</li>
<li ui-sref="test ({id: id})
浏览 2提问于2016-06-08得票数 0
回答已采纳
我正在用这个
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("picHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getpic.php?q="+str+"&t=" + Math.random(),true);
浏览 0提问于2011-07-03得票数 2
回答已采纳
1回答
嗨，我正在我的应用程序中使用wpf mvvm方法。我收到这个错误：-
指定的元素已经是另一个元素的逻辑子元素。请先断开连接。WPF
我写了这样的代码：-在我的xaml页面中：
<Border Background="White" BorderThickness="0" x:Name="bdrPdf">
<ContentControl x:Name="CntControlPdf"
MouseDown="Img_MouseDownPdf"
MouseMove=
浏览 2提问于2015-06-17得票数 0
粗略地说，单向数据绑定只是简单地与页面中的ng-model绑定，而当涉及控制器时则是双向绑定。有人能给我解释一下这个概念吗?这样我才能真正理解如何看待它？还有什么是3路数据绑定，还有4路，5路？
浏览 5提问于2014-12-11得票数 8
回答已采纳
我遇到了一些问题，在输入上设置了一个ng值。我需要将userID传递给输入，一旦单击表单，就可以发送该输入。
这是我的html
<div ng-repeat="chats in chat">
<form ng-submit="submit()" id="login-form1" class="list">
<button style="">
<ion-item style="background:rgb(243,243,243)"
浏览 1提问于2017-01-15得票数 0
4回答
我的HTML代码是
<a href='someValidLink' class="link">
<img src='imageUrl'/>
</a>
js脚本是
$('.link').click(function(e) {
console.log("log something");
return false;
});
现在单击图像不应该将我重定向到新页面，但不知怎么的，它是
到目前为止，我已经尝试将相同的类放入img标记中，使用id代替类，使用e.prev
浏览 5提问于2013-10-19得票数 6
回答已采纳
我有一个很好的CSS生成卡列表。它们包含图标和文本，有一个很好的动画，一旦你点击它们，显示更多的图标和选项。我硬编码名单，使它看起来和行为完全符合我的意愿。
现在，我在数据库中有一些JSON数据，我想使用这些数据动态填充列表。
Problem：除了由jQuery toggleClass()触发的CSS动画之外，它工作得很好。
我怎么才能解决这个问题？这是我的密码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="v
浏览 7提问于2017-10-19得票数 0
回答已采纳
2回答
我使用以下代码插入额外的表单域。
function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + &#
浏览 2提问于2009-06-02得票数 0
回答已采纳
角2提供了许多内置组件.比如NgIf，NgFor，NgStyle，NgNonBindable.有些组件与“*”一起使用，例如*ngIf和*ngFor：
<div *ngFor="item of items">
{{item}}
</div>
其中一些与“[]”一起使用，例如ngStyle和ngClass：(组件输入？)
<div [ngStyle]="{'background-color': 'yellow'}">Content</div>
其中一些被用作“角-1”：例如：
&
浏览 1提问于2016-03-16得票数 0
回答已采纳
在下面的字符串中，解析javascript对象并将其放置到ngBinding中并不会对其进行评估。我有一个字符串，我试图将javascript对象的一个特定部分包含在其中，并且为了相对方便的使用，我切换到了角。目前的字符串是：
<html ng-app="bindHtmlExample">
...
<div>
<p>"You owe ${{datatokens["DB.PMT"]}}"</p>
如果我将类似于"You owe ${{600+11}}"的内容放置在ngBindi
浏览 4提问于2014-08-12得票数 1
回答已采纳
1回答
我有一个简单的AngularJS应用程序，它在用户登录后显示一个包含ng-repeat数据的表。我遇到了一个问题，在登录后，表短暂地显示空白行，然后显示包含数据的实际行。对如何解决这个问题有什么建议吗？
这是登录的控制器：
$scope.login = function(user) {
loginSrvc.login(user).then(function(response) {
if (response == "authentication failed") {
$scope.error = true;
$scope.u
浏览 0提问于2018-11-02得票数 0
1回答
首先也是最重要的，你好！我对这里一无所知。
我最近在工作中一直在学习AngularJS和web开发，所以我为我的新手道歉。关于数据表与AngularJS的集成，我遇到了一些麻烦。下面是它的结构：
<table class="datatable table table-hover">
<thead>
<tr>
<th ng-repeat="column in columns
浏览 16提问于2017-08-08得票数 0
我正在AngularJS中创建一个应用程序，在那里我从后端抓取数据以显示在视图上。但是，出于某种原因，我在我的控制台中获取数据，而不是在我看来。如果有人能帮我解决这个问题，我会非常感激的。提前谢谢。
这是我的密码。-Services
app.factory('user', ['$http', function($http) {
var userInfo = {
getUserInfo: function () {
return $http.get('https://************
浏览 2提问于2017-05-17得票数 0
3回答
Angular有不同的数据绑定属性的方法：
<img src="{{ myProperty }}">
<img bind-src="myProperty ">
<img [src]="myProperty">
是否有将组件属性绑定到视图的正确方法？这三种方式有什么区别，我什么时候应该使用每种方式，为什么要使用它们？
浏览 0提问于2017-09-22得票数 11
回答已采纳
如何使隔离作用域在没有远程模板的客户指令中工作？
下面这句话对我没有用。
AnularJS
app.directive('emanForm', ['$http', 'db', function ($http, db) {
return {
scope: { },
link: function ($scope, element, attrs) {
$scope.message = 'test';
}
};
}]);
HTML
<f
浏览 2提问于2015-03-19得票数 1
回答已采纳
我有api，它返回图像，不管它是否存在于数据库中，我必须使用带有angularJs的api在我的UI中显示该图像。
我必须传递userid，并检查对应于该用户if的图像是否存在，如果存在，则显示该图像，否则将显示虚拟图像。
AngularJs代码，用于从服务器获取图像
QAApp.controller('imgCtrl', function ($scope, $http) {
// id is userid.
$scope.image = function (id) {
var request = $http({
浏览 4提问于2014-09-01得票数 2
回答已采纳
3回答
我的jQuery代码有一个问题。当我做一个附加时，事件点击只作用于第一个img，而不是新的(附加的)。
我的代码page.htm：
<img src="images/del.png" style="cursor:pointer;" title="Delete" class="delegate-del"/>
<img src="images/add.png" style="cursor:pointer;" title="Add" class="delegate
浏览 0提问于2013-06-28得票数 0
回答已采纳
2回答
我正在使用Bootstrap在我的网站上显示一个旋转木马，并且我在之后显示每一张幻灯片上的几个项目。使用静态图像非常好，我对结果非常满意(例如，在上，确保显示帧足够大，以避免由于引导的媒体查询而产生的奇怪效果，我将在后面讨论)。
但是，现在我想从一个变量中定义旋转木马的内容，并将其与AngularJS绑定到一个ng-repeat。问题就在那里发生。数据被正确绑定，但只有被视为“活动”项的图像才会显示。我明白这是有意义的，但对于静态定义的图像，它的表现并不是这样。请查看以查看我的bug。
到目前为止我尝试过的是：
显示所有项目并设置溢出:隐藏
将项大小更改为33%并显示所有内容，而不是使
浏览 1提问于2017-10-16得票数 0
回答已采纳
我有一些问题，我试着解决自己。但我没有。我正在创建一个脚本，可以一次上传多张图片。我第一次得到一个输入文件字段，如果有人为上传字段添加了照片，那么我已经编写了一个JavaScript，然后自动生成新的上传字段。它第一次运转良好。它成功地生成了新的上传字段。但它还没有产生第二次。我想你应该对鞋带有所了解吧。
这是我的HTML代码
<input type ="file" class ="fileup 1" id ="file1">
<label for ="file1" id ="lbl_upload&#
浏览 2提问于2016-12-16得票数 2
回答已采纳
2回答
在选择器更改后单击Not
、、、、
我在网站上有个锚。当有人单击它时，我会在jquery中搜索并更改名称，但是当它再次被单击时，会触发事件，尽管我已经更改了它的名称。这里的代码：
$(".like_cont a[name=like]").click(function (e) {
alert("W");
var t = $(this);
t.find("img").attr("src", "images/like_icon.png");
浏览 2提问于2012-08-12得票数 0
回答已采纳
5回答
我有一些用创建的自定义元素。让我们称它为x-输入，它看起来如下：
<polymer-element name="x-input" attributes="name">
<template>
<input type="text" value={{name}}> <span>{{name}}</span>
<br />
<input type="range" value={{age}} > <
浏览 9提问于2014-05-09得票数 2
回答已采纳
我正在尝试预览从具有多个输入类型的文件中选择的图像。为此，我想要文件路径的列表，并使用这些路径，我将预览图像。
但在这里我在img标签中使用了ng-src，这些路径是在ng-src上设置的，我还想使用ng-repeat根据文件选择创建img标签。
假设我将在input type=file上选择5个文件，然后创建5个img标签。假设我将文件从5更改为2，然后删除了所有5个img标记并创建了2个img标记。
我不知道ng-repeat是否是根据文件选择创建img标签的正确选择？
下面是我的myfileupload指令
App.directive('myFileUpload', fu
浏览 1提问于2015-07-04得票数 0
我想问关于张贴的问题，实际上我下面有一份表格，在这种形式下，我使用ng-提交和ng-点击功能，但它没有工作，谁能帮我吗？
<form method="post" class="sky-form" name="form">
<div class="row">
<div class="col col-12"><img src="public/images/icon_namapasien.png" alt=""/> N
浏览 5提问于2016-03-17得票数 0
1回答
我在玩粘性导航。问题是fixed/static类对的评估/应用时间过长。
标记如下所示：
<div id="header" ng-controller="navController">
<div id="logo">
<a href="#"><img src="@Url.Content(@"~/assets/img/logotype.png")" alt="logo" /></a>
</
浏览 4提问于2014-09-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
