Fatal编程技术网
  • html/
  • Html 如何在数组中以角度添加图像？

Html 如何在数组中以角度添加图像？

html angularjs

Html 如何在数组中以角度添加图像？,html,angularjs,Html,Angularjs,这是我的plunker链接： 我正在尝试开发一个应用程序，其中数组中包含元素。当我点击每个元素时，会显示详细信息，但我无法显示图像 如何在数组中添加图像属性并再次使用html页面显示它 script.js： var app = angular.module("myApp", ["ngRoute"]); app.controller('mobileController', function($scope) { $scope.items = [{ name: 'Iphone

这是我的plunker链接：

我正在尝试开发一个应用程序，其中数组中包含元素。当我点击每个元素时，会显示详细信息，但我无法显示图像

如何在数组中添加图像属性并再次使用html页面显示它

script.js：

var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
    $scope.items = [{
        name: 'Iphone',price:70000,rating:'*****',image: 'how to add image here'
    }, {
        name: 'Oneplus',price:60000,rating:'****',image: 'how to add image here'
    }, {
        name: 'Samsung',price:50000,rating:'***',image: 'how to add image here'
    }, {
        name: 'Sony',price:40000,rating:'***',image: 'how to add image here'
    }, {
        name: 'Moto',price:20000,rating:'****',image: 'how to add image here'
    }];
});

app.config(function($routeProvider) {
    $routeProvider
      .when('/item/:itemName/:itemPrice/:itemRating/:itemImage', {
          templateUrl: 'details.html',
          controller: 'ItemCtrl'
      });
});

app.controller('ItemCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
      $scope.itemName = $routeParams.itemName;
      $scope.itemPrice = $routeParams.itemPrice;
      $scope.itemRating = $routeParams.itemRating;
      $scope.itemImage = $routeParams.itemImage;
  }
]);
index.html

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="script.js"></script>
    <body ng-app="myApp" ng-controller="mobileController">
        <h2> Welcome to Mobile Store</h2>
        <p>Search:<input type="text" ng-model="test"></p>
        <ul>
            <li ng-repeat="item in items|filter:test">
                <a href="#/item/{{item.name}}/{{item.price}}/{{item.rating}}/{{item.image}}">{{ item.name }}</a>
            </li>
        </ul>
        <div ng-view></div>
    </body>
</html>


欢迎来到移动商店
搜索：


    

  • 

    •
details.html

<p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice}}</p>
<p>ItemRating:{{itemRating}}</p>
<p>{{itemImage}}</p>

ItemName:{{ItemName}

ItemPrice:{{ItemPrice}}

ItemRating:{{ItemRating}}

{{itemImage}}
您的detail.html更改为如下所示

<p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice}}</p>
 <p>ItemRating:{{itemRating}}</p>
  <img ng-src="itemImage">

ItemName:{{ItemName}

ItemPrice:{{ItemPrice}}

ItemRating:{{ItemRating}}
添加图像的更好方法是在angularjs中使用ng src。例如，您可以给出图像的相对路径。我的图像位于内容文件夹“./content/images/T1_1.jpg”和html add中

对您的
details.html
和
script.js
进行一些小更改，如下所示-

script.js

  app.controller('mobileController', function($scope) {
  $scope.items = [{
    name: 'Iphone',price:70000,rating:'*****',image: 'www.w3schools.com/css/trolltunga.jpg'
  }, {
    name: 'Oneplus',price:60000,rating:'****',image: 'path/to/imgresource'
  }];
});
details.html

<p>ItemName: {{itemName}}</p>
<p> ItemPrice: {{itemPrice}}</p>
<p>ItemRating:{{itemRating}}</p>
<img ng-src="{{item.image}}" alt="some text">

我认为您尝试的方式不可能做到这一点，因为您的映像路径也将具有/

看看这个正在工作的弹片。

只传递名称或某个id

 <li ng-repeat="item in items|filter:test"><a href="#/item/{{item.name}}">{{ item.name }}</a>
您可以存储路径并使用
ng src
在何处存储路径您可以详细说明吗？将
如何在此处添加图像
替换为
/pah/to/image.png
然后您可以使用
您的正常路径就足够了。比如图像：“path1/photo.png”你是说我的桌面上的图像路径？把你的图像放在你的项目文件夹中。。然后给出路径。有什么方法可以在plunker中添加图像，然后给出路径吗？您可以使用base64编码的数据uri或使用imgur来为您这样做。plnkr我猜不支持非文本格式图像未显示，alt中的某些文本正在显示是因为plunker不支持图像吗？请尝试在项目中使用路径而不是plunker，因为它无法理解您可能在“ng src”中给出的图像的相对路径。或者请分享你正在使用的图像标签。嘿，谢谢！但是你是怎么给谷歌图片链接的呢？我试着给iPhone图片链接，但我没有得到png格式，你可以看到我在script.js文件中发布的plunkr，我设置了图片路径，然后在details.html 
 <li ng-repeat="item in items|filter:test"><a href="#/item/{{item.name}}">{{ item.name }}</a>

angular.forEach($scope.items, function(item) {
     if(item.name==$routeParams.itemName){
          $scope.itemName = item.name;
          $scope.itemPrice = item.price;
          $scope.itemRating = item.rating;
          $scope.itemImage = item.image;
    }
});