Angularjs 在控制器中设置的图像 url 上获得 404

Question

好的，我已经在这个问题上工作了一个星期了，但我无法弄清楚。

我在一个建立在 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（未找到）index.html:1

我已经手动检查了 json 文件中的所有 27 个条目，并且 titlePicture.urls[0].url[3].href 已为所有条目设置

有人有什么想法吗？该页面可以在这里看到 http://www.relaunch.bsf-immobilien.de/#/wohnen

这是相关的 ng-repeat 代码

<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

问题似乎出在您的 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对吧？

那样的话最好标记为angular表达式，如下：

我已经在下面的代码中更正了它：

<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 2

尝试使用 ng-src 而不是 src，而且单向绑定 :: 不需要在表达式中调用两次：

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

Angularjs 在控制器中设置的图像 url 上获得 404

Angularjs getting a 404 on image urls set in controller

javascript

json

controller

http-status-code-404

angularjs