用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添加圖像

回答

相關問題