在AngularJS中用ng-repeat展示Flickr图片，能否直接获取图片路径？

嘿，我来帮你搞定这个问题！你现在碰到的两个核心点：一是现有带HTML的imageURL没法在AngularJS里正常渲染，二是能不能直接从Flickr API拿纯图片路径——答案是完全可以，咱们一步步来拆解：

一、先解决当前无法渲染HTML的紧急问题 #

你直接用{{Affiliation.imageURL}}只会显示纯文本，是因为AngularJS为了安全，默认会自动转义所有HTML内容。要让它渲染成图片和链接，得用ng-bind-html指令，同时配合ngSanitize模块：

1. 先确保你的AngularJS模块引入了ngSanitize依赖：

var app = angular.module('yourAppName', ['ngSanitize']);

2. 修改HTML代码，把插值表达式换成ng-bind-html：

<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in getAffiliationData">
  <div ng-bind-html="Affiliation.imageURL"></div>
</div>

⚠️ 注意：这里的<script>标签可能不会自动执行，因为AngularJS不会运行动态插入的脚本。如果不需要Flickr的嵌入交互，直接用纯图片路径会更省心。

二、直接从Flickr API获取纯图片路径（更优方案） #

这才是更干净的实现方式，不用处理乱七八糟的嵌入HTML和脚本。Flickr的官方API（比如photos.getInfo、photos.search这类接口）返回的照片数据里，自带不同尺寸的纯图片URL，或者你也可以用固定规则手动构造：

1. 从API响应提取原生图片URL #

当你调用Flickr API获取照片时，返回的photo对象里会有sizes字段，包含了各种尺寸的图片信息，比如：

"sizes": {
  "size": [
    { "label": "小正方形", "source": "https://farm5.staticflickr.com/4592/25515548558_0cb257389b_s.jpg", "width": "75", "height": "75" },
    { "label": "原图", "source": "https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg", "width": "266", "height": "79" }
  ]
}

你直接提取source字段作为图片的URL就行。

2. 手动构造图片URL（如果已有照片核心信息） #

要是你已经有照片的farm、server、id、secret这几个字段，也可以按照Flickr的固定规则拼接URL：

https://farm{farm-id}.staticflickr.com/{server-id}/{photo-id}_{secret}_{尺寸后缀}.jpg

常用的尺寸后缀比如：

• s: 75x75小正方形
• q: 150x150大正方形
• m: 240px宽小图
• o: 原图

3. 在AngularJS中渲染纯图片 #

拿到纯图片URL后，直接用<img>标签配合ng-repeat就能轻松渲染，完全不用处理HTML转义：

<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="photo in flickrPhotos">
  <!-- 要加Flickr页面链接的话，套个a标签就行 -->
  <a ng-href="{{photo.flickrPageUrl}}" target="_blank">
    <img ng-src="{{photo.imageUrl}}" alt="{{photo.title}}" width="266" height="79">
  </a>
</div>

这里用ng-src和ng-href而不是原生的src/href，是为了避免AngularJS还没解析完表达式就发起无效请求。

内容的提问来源于stack exchange，提问作者Raj Gujrathi