用Angular JS添加图像

嗨，我是新来的角js，我正在使用它的应用程序。但是，我无意中发现了一个问题...（我主要做HTML/CSS）添加图像时，标记他们不露面的常规方式：用Angular JS添加图像

<img src="image/source/image.png"/>

所以我做了以下控制器文件：

subscriptionControllers.controller('imagesController', function($scope) { 
    $scope.image = [{ 
    src: 'image/source/image.png', 
    }]; 
});

然后添加到HTML：

<img ng-src="{{image}}"/>

，但仍然没有被显示出来。

任何帮助，这是非常感谢，谢谢！

编辑：

是图像存在，并且该路径是正确的当我看到控制台它显示的图像为： image.png％22％7D] /订阅/图像

因此它会在图像中添加％22％7D我不知道为什么，如果我单击控制台中的图像链接，它会将我带到404页面。

编辑：我不再认为这是问题，当我看着控制台，然后单击图像选项卡，它将图像显示为类型：html/text我不知道它为什么这样做，任何线索？

来源

2014-03-12 meztli

在angularjs中你的代码应该没有问题，你确定图像存在吗？ –

我可以看到你的图像模型是一个json对象的数组。如果是这样，请在访问图像模型时在视图中进行以下更改。

<img ng-src="{{image[0].src}}"/>

来源

2014-03-12 17:44:50 Sai

您可能在图像src中指定了错误的路径。您可以使用每个浏览器中提供的萤火虫或开发人员工具来检查图像是否已加载。

来源

2014-03-12 17:26:06

，应确保已定义你的NG-应用和NG-控制器，一切看起来是正确的，在这里做一个测试例子：

http://plnkr.co/edit/JnwCyEWT3KiZcsrSg6Ro?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="myApp" ng-controller="MyCtrl"> 
    <img src="https://www.google.com/images/srpr/logo11w.png"/> 
    <img ng-src="{{image}}"/> 
    </body> 

</html>

// Code goes here 

angular.module("myApp", []).controller("MyCtrl", function($scope){ 
    $scope.image = "https://www.google.com/images/srpr/logo11w.png"; 

    })

来源

2014-03-12 17:35:50 shaunhusain

使用此<img src="{{image[index].src}}"/>

看来你正在使用对象数组所以你的情况“指数”是要显示对象的索引。希望这会帮助你。

来源

2015-10-24 10:32:13

这将工作，它只是没有角度的方式来看到@Sai的最佳答案。 –

用Angular JS添加图像

回答

相关问题