如何在组件中渲染iTunes接口返回的im:image字段数据？

由于im:image是带特殊符号的属性名，在JS/TS里不能用点语法直接访问，得用方括号语法。而且每个Entry里的im:image是一个数组，存着不同尺寸的播客封面（通过height属性区分），你可以按需求选单张或渲染所有图片：

1. 渲染指定尺寸的封面 #

比如选高度为100px的封面（接口返回的封面一般有60、100、170这几个常用尺寸）：

pods.map((pd: Entry, index) => (
  // 注意每个列表项必须加唯一key，这里用index临时替代，实际建议用播客的唯一标识
  <div key={index}>
    {pd["im:image"].some(img => img.attributes.height === "100") ? (
      <img
        src={pd["im:image"].find(img => img.attributes.height === "100")!.label}
        alt="播客封面"
        style={{ width: 100, height: 100 }}
      />
    ) : (
      <span>暂无封面</span>
    )}
  </div>
))

2. 渲染所有尺寸的封面 #

如果需要展示所有可用尺寸的封面：

pods.map((pd: Entry, index) => (
  <div key={index}>
    {pd["im:image"].map((img, imgIdx) => (
      <img
        key={imgIdx}
        src={img.label}
        alt={`播客封面（${img.attributes.height}px）`}
        height={img.attributes.height}
      />
    ))}
  </div>
))

关键提示 #

• 特殊属性名必须用pd["im:image"]访问，不能写pd.im:image或pd.im.image
• 列表渲染的key尽量用播客的唯一ID（比如接口里的id.label），别一直用index，避免列表更新时出现性能问题
• 优先选符合页面布局的图片尺寸，减少不必要的带宽消耗

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