0
我目前在使用Django REST框架從我新創建的產品API中呈現圖像時出現問題。我有一切正在加載，但圖像不會加載。使用django rest API使用角度服務映像時遇到問題
我採用了棱角分明的消費用下面的代碼的API數據：
myStore.controller("myStoreController",function($scope,$http){
$scope.gems = $http.get("/api/products/").then(
function(response){
$scope.gems = response.data
}, function(error){
$scope.error = error
});
})
這裏是產品其餘URL代碼：
from django.conf.urls import url,include
from rest_framework import routers
from products_rest.viewsets import ProductsViewsets
router = routers.DefaultRouter()
router.register('products',ProductsViewsets,'products')
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
url(r'^', include(router.urls)) #base router
] + static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)
最後，這裏是主要設置網址爲django的應用程序：
from django.conf.urls import url,include
from django.contrib import admin
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^api/', include('customerreview_rest.urls', namespace='api')),
url(r'^api/',include ('products_rest.urls', namespace='api')),
url(r'^', include('GemStore_App.urls',namespace='frontend')),
] + static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)
當我導航到圖像的URL，我可以訪問圖像，但對於wh atever原因我無法將圖像顯示在頁面上。
和API看起來像這樣目前：
[
{
"name": "Dodecahedron",
"price": 30,
"description": "Some gems have hidden qualities beyond their lustre, beyond their shine. This is one of them",
"images": "http://127.0.0.1:8000/media/gem-01.gif",
"canPurchase": true
},
**編輯**下面是該項目的HTML：
<!DOCTYPE html>
<html ng-app="myStore">
<head>
<title>Gem Store App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.js"></script>
<script type="text/javascript" src="modules/reviews.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/myStoreController.js"></script>
<script type="text/javascript" src="controllers/myPanelController.js"></script>
<script type="text/javascript" src="controllers/myReviewsController.js"></script>
</head>
<body>
<div class="container">
<div ng-controller="myStoreController" class="row">
<div ng-repeat="product in gems" class="col-md-4">
<div class="panel-heading">
<h1>{{product.name }}</h1>
</div>
<div class="panel-body">
<div>
<img ng-repeat="image in product.images track by $index" ng-src='{{image.full}}'/>
</div>
<h2 >{{product.price | currency}}</h2>
<button ng-show="product.canPurchase" class="btn btn-success">Add to Cart</button>
</div>
<section ng-init="tab = 1" ng-controller="myPanelController">
<ul class="nav nav-pills">
<li ng-class="{ active:isSelected(1) }"><a ng-click="selectTab(1)">Description</a></li>
<li ng-class="{ active:isSelected(2) }"><a ng-click="selectTab(2)">Specifications</a></li>
<li ng-class="{ active: isSelected(3) }"><a ng-click="selectTab(3)">Reviews</a></li>
</ul>
<div class="panel" ng-show = "isSelected(1)">
<h4>Description</h4>
<blockquote>{{product.description}}</blockquote>
</div>
<div class="panel" ng-show = "isSelected(2)">
<h4>Specifications</h4>
<blockquote>Nothing yet</blockquote>
</div>
<div ng-app="storeReviews">
<div class="panel" ng-show="isSelected(3)" reviews ng-controller="myReviewsController">
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
任何幫助將不勝感激。
感謝
你如何綁定Angular上的圖像？ –
對不起，我忘了添加index.html ...我用角度轉發器綁定到它。請參閱我的更新瞭解更多詳情。 –
'product.images'是一個字符串，你怎麼可以重複它？你沒有任何控制檯日誌？ –