Hiển thị hình ảnh thông qua thẻ img html với angularjs và ionic

Question

Tôi hiện đang làm một ứng dụng di động lai với ionic và Angularjs và tôi đang cố gắng hiển thị hình ảnh thông qua thẻ img html. Trang của tôi bao gồm một caroussel ở trên cùng (hoạt động tốt, nó hiển thị hình ảnh) và một danh sách có hình ảnh nhỏ. Trong bộ điều khiển của trang của tôi ở đó là:

app.controller('SalleCtrl', function ($scope,$location) { 

$scope.salle = { 
    "num": "2", 
    "imgR": [ 
     "img/art_affiche_6_thumb-300x300.jpg", 
     "img/art_affiche_6_thumb-300x300.jpg" 
    ], 
    "title": "Salle 2 : Premières peintures", 
    "_audio_guide": [], 
    "_audio_guide_fe": [], 
    "_audio_guide_en": [], 
    "artworks": [ 
     { 
      "img": "img/art_affiche_6_thumb-300x300.jpg", 
      "href": "http://172.16.12.158/wordpress/mcm_oeuvre/oeuvre-14-2/", 
      "title": "Oeuvre 14" 
     }, 
     { 
      "img": "img/art_affiche_9_thumb-300x300.jpg", 
      "href": "http://172.16.12.158/wordpress/mcm_oeuvre/oeuvre-3/", 
      "title": "Oeuvre 3" 
     } 
    ] 
}; 
}); 

Và trong trang html của tôi ở đó là:

<ion-view title="{{salle.title}}"> 

<ion-nav-buttons side="right"> 
    <button menu-toggle="right" class="button button-icon icon ion-navicon"></button> 
</ion-nav-buttons> 
<ion-content class="has-header" id="" > 
    <ul rn-carousel class="image"> 
     <li ng-repeat="image in salle.imgR" style="background-image:url({{ image }});background-color:black;background-repeat:no-repeat;background-position:center center;background-size : contain;"> 
     </li> 
    </ul> 

    <div class="list"> 
     <a ng-repeat="artwork in salle.artworks" class="item item-avatar" href="{{artwork.href}}"> 
      <img ng-src="{{artwork.img}}"> 
      <h2>{{artwork.title}} {{artwork.img}}</h2> 
     </a> 
    </div> 

</ion-content> 

Khi tôi hiển thị nó trên tất cả mọi thứ trình duyệt hoạt động tốt. Nhưng khi tôi thử trên điện thoại thông minh của mình, caroussel hoạt động, nó hiển thị hình ảnh, nhưng danh sách không hiển thị hình ảnh, không được {{artwork.img}} hiển thị cho tôi tất cả hình ảnh. tôi cố gắng:

1. thay thế 'ng-src' bởi 'src' nhưng không có gì xảy
2. thay ng-src = "{{artwork.img}}" bởi ng-src = "img/art_affiche_6_thumb -300x300.jpg "Nó hoạt động.

Dường như ràng buộc không được thực hiện chính xác ... Bạn có biết tại sao không? Và làm thế nào giải quyết nó ?! Hơn nữa trên điện thoại thông minh của tôi, đường dẫn của hình ảnh trông giống như "cdvfile: // localhost/persistent/...". Caroussel hoạt động tốt, nhưng danh sách hình ảnh không hoạt động, và khi tôi dịch "cdvfile: // localhost/persistent/..." thành "file: // mnt/sdcard/..." nó hoạt động. Tại sao?!

Answer 1

Cuối cùng tôi đã tìm thấy câu trả lời. Vấn đề là do thực tế là angularjs prevent XSS attacks via html link with the function imgSrcSanitizationWhitelist. Vì vậy, đường dẫn hình ảnh bắt đầu bằng 'cdvfile: // localhost/persistent' là tiền tố của "không an toàn:" và vì vậy hình ảnh không hiển thị. Để khắc phục vấn đề này, tôi đã phải ghi đè phương pháp này, để làm điều đó trong cấu hình của tôi về mô-đun chính của tôi để tôi thêm mã này:

var app = angular.module('myApp', []) 
    .config(['$compileProvider',function($compileProvider){ 
     $compileProvider.imgSrcSanitizationWhitelist(/^\s(https|file|blob|cdvfile):|data:image\//); 
     } 
    ]); 

Các cuộc thảo luận với các answer

Answer 2

Có tình huống khác mà có thể khiến thẻ img không giải quyết được. Tôi đã chuyển một ứng dụng web HTML5 sang ứng dụng hỗn hợp và gặp sự cố ở trên, trong chế độ xem, thẻ img sẽ không giải quyết được. Trong khởi định tuyến của tôi, tôi đã gọi điện thoại:

$locationProvider.html5Mode(true); 

Điều này dường như gây ra một vấn đề với việc tìm kiếm src img trên địa phương cài đặt (trừ khi trên điện thoại android, tôi đã không thử nghiệm trên IOS). Cho rằng mã này không thực sự cần thiết trừ khi bạn đang hiển thị trong trình duyệt, tôi đã xóa mã cho ứng dụng hỗn hợp.

Answer 3

---

Tôi đã gặp vấn đề tương tự nhưng nó đã được giải quyết bằng cách chỉ tham chiếu hình ảnh liên quan đến tệp index.html chứ không phải tham chiếu tuyệt đối dựa trên URL.

Tôi đã có img src="/hello.jpg" khi cần phải là img src="hello.jpg". :)

Answer 4

Tôi biết điều này đã được một thời gian, nhưng tôi thấy mình có cùng một vấn đề với Ionic 3.Nó được giải quyết đơn giản bằng cách thay đổi:

<img ng-src="{{artwork.img}}"> 

này:

<img ng-src={{artwork.img}}> 

Tôi hy vọng điều này đã giúp một ai đó.