Question

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

我在一个基于angularjs构建的网站上工作，我们从存储在服务器上的json文件中加载信息所有这些都有效，但是当页面加载由于某种原因时，其中一个图像标记总是发送404错误但是它们都加载了很好

错误示例获取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

问题似乎与您的网址有关：

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

希望这对你有用..

Answer 2

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

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

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

2 个答案: