Angularjs получает 404 на графических URL-адресах, установленных в контроллере

Question

ok Я работаю над этой проблемой в течение недели, и я не могу ее понять.

im работает на сайте, построенном на angularjs, и мы загружаем информацию из json-файлов, хранящихся на сервере, все это работает, но когда страница загружается по какой-либо причине, один из тегов изображений всегда отправляет ошибку 404, но затем все загружает штраф

Пример ошибки GET http://localhost:3000/angular/::%20listp.titlePicture.urls[0].url[3].href%20%7C%20srcFill%20:%20%7Bwidth:447,height:351%7D%20 :: 404 (Not Found) index.html: 1

я вручную проверил все 27 записей в файле JSON и titlePicture.urls [0] .url [3] .href для всех них

У кого есть идеи? страница может замеченную здесь http://www.relaunch.bsf-immobilien.de/#/wohnen

это отношение нг-повтор код

<div class="col-md-4 col-ms-6 col-sm-4 col-xs-12" ng-repeat="listp in filteredtodos | unique:'id'"> 
    <div class="panel panel-default relative" style="width: 100%; height:380px; padding-bottom: 15px; float: left; box-sizing: border-box;"> 
    <div class="ribbon-heading ribbon-default inline absolute left margin-none"> 
     <span ng-show="listp.xsitype == 'OfferApartmentBuy'">Wohnung zum Kaufen</span> 
     <span ng-show="listp.xsitype == 'OfferHouseBuy'">Haus zum Kaufen</span> 
     <span ng-show="listp.xsitype == 'OfferApartmentRent'">Wohnung zum Mieten</span> 
     <span ng-show="listp.xsitype == 'OfferHouseRent'">Haus zum Mieten</span> 
     <span ng-show="listp.xsitype == 'OfferShortTermAccommodation'">Wohnen auf Zeit</span> 
    </div> 
    <div class="cover hover overlay margin-none" style="max-height: 250px;"> 
     <a href="#/wohnen/::listp.id::"> 
     <img src=":: listp.titlePicture.urls[0].url[3].href | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;"> 
     </a> 
     <a href="#/wohnen/::listp.id::" class="overlay overlay-full overlay-bg-black overlay-hover" style="height: 143px;"> 
     <span class="v-center"> 
      <span class="btn btn-circle btn-white btn-lg"><i class="fa fa-eye"></i></span> 
     </span> 
     </a> 
    </div> 
    <div class="panel-body"> 
     <h4 class="margin-v-0-5">::listp.title::</h4> 
     <p><span ng-show="listp.xsitype == 'OfferApartmentBuy'">Kaufpreis: </span> 
     <span ng-show="listp.xsitype == 'OfferApartmentRent'">Miete: </span> 
     <span ng-show="listp.xsitype == 'OfferHouseBuy'">Kaufpreis: </span> 
     <span ng-show="listp.xsitype == 'OfferHouseRent'">Miete: </span> ::listp.price.value | currency:'EUR' :: 
     <a href="#/wohnen/::listp.id::"> 
      <button class="btn btn-primary btn-lg absolute bottom btn-circle right" style="margin-bottom:10px; margin-right:10px;"><i class="fa fa-arrow-right"></i></button> 
     </a> 
     </p> 
    </div> 
    </div> 
</div> 

Answer 1

попробуйте использовать ng-src вместо src, кроме того, односторонняя привязка :: не должна вызываться дважды в выражении:

<img ng-src="::listp.titlePicture.urls[0].url[3].href" ... /> 

Answer 2

Проблема, кажется, с URL:

<img src=":: listp.titlePicture.urls[0].url[3].href | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;"></a> 

Кажется, вы действительно хотите получить доступ к значение массива listp.titlePicture.urls[0].url[3].href право?

В этом случае лучше пометить его как угловом выражения, следующим образом:

я исправил его в следующем коде:

<div class="col-md-4 col-ms-6 col-sm-4 col-xs-12" ng-repeat="listp in filteredtodos | unique:'id'"> 
    <div class="panel panel-default relative" style="width: 100%; height:380px; padding-bottom: 15px; float: left; box-sizing: border-box;"> 
    <div class="ribbon-heading ribbon-default inline absolute left margin-none"> 
     <span ng-show="listp.xsitype == 'OfferApartmentBuy'">Wohnung zum Kaufen</span> 
     <span ng-show="listp.xsitype == 'OfferHouseBuy'">Haus zum Kaufen</span> 
     <span ng-show="listp.xsitype == 'OfferApartmentRent'">Wohnung zum Mieten</span> 
     <span ng-show="listp.xsitype == 'OfferHouseRent'">Haus zum Mieten</span> 
     <span ng-show="listp.xsitype == 'OfferShortTermAccommodation'">Wohnen auf Zeit</span> 
    </div> 
    <div class="cover hover overlay margin-none" style="max-height: 250px;"> 
     <a href="#/wohnen/::listp.id::"> 
     <img src=":: {{listp.titlePicture.urls[0].url[3].href}} | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;"> 
     </a> 
     <a href="#/wohnen/::listp.id::" class="overlay overlay-full overlay-bg-black overlay-hover" style="height: 143px;"> 
     <span class="v-center"> 
      <span class="btn btn-circle btn-white btn-lg"><i class="fa fa-eye"></i></span> 
     </span> 
     </a> 
    </div> 
    <div class="panel-body"> 
     <h4 class="margin-v-0-5">::listp.title::</h4> 
     <p><span ng-show="listp.xsitype == 'OfferApartmentBuy'">Kaufpreis: </span> 
     <span ng-show="listp.xsitype == 'OfferApartmentRent'">Miete: </span> 
     <span ng-show="listp.xsitype == 'OfferHouseBuy'">Kaufpreis: </span> 
     <span ng-show="listp.xsitype == 'OfferHouseRent'">Miete: </span> ::listp.price.value | currency:'EUR' :: 
     <a href="#/wohnen/::listp.id::"> 
      <button class="btn btn-primary btn-lg absolute bottom btn-circle right" style="margin-bottom:10px; margin-right:10px;"><i class="fa fa-arrow-right"></i></button> 
     </a> 
     </p> 
    </div> 
    </div> 
</div> 

Надеется, что это прекрасно работает для вас ..