在Angular中如何根据返回名称条件绑定本地文件夹内的图片src属性

核心逻辑是将本地图片的公共路径前缀和API返回的图片名称拼接，匹配你本地images文件夹的存储路径即可，以下是不同开发场景的实现方案：

前提假设 #

API返回的图片名称对应字段为record.coin，本地图片统一后缀为png，存放在项目根目录的images文件夹下，若你的实际存储路径、后缀、字段名不同，对应调整参数即可。

原生JavaScript实现 #

const img = document.createElement('img')
// 路径前缀根据项目实际部署的根路径调整，根目录部署直接用'/images/'
img.src = `/images/${record.coin}.png`
img.alt = `${record.coin} logo`

Vue.js实现 #

图片存放在public目录下

直接在模板内拼接路径即可：

<div class="left">
  <img :src="`/images/${record.coin}.png`" alt="{{ record.coin }} logo" />
</div>

图片存放在src/assets目录下（Vite项目）

用import.meta.url拼接资源路径：

<div class="left">
  <img :src="new URL(`../assets/images/${record.coin}.png`, import.meta.url).href" alt="{{ record.coin }} logo" />
</div>

React实现 #

图片存放在public目录下

<div className="left">
  <img 
    src={`/images/${record.coin}.png`}
    alt={`${record.coin} logo`}
  />
</div>

图片存放在src/assets目录下

用require动态引入：

<div className="left">
  <img 
    src={require(`../assets/images/${record.coin}.png`)}
    alt={`${record.coin} logo`}
  />
</div>

优化建议 #

• 若本地图片后缀不统一，可要求API返回的名称字段携带完整后缀，避免前端拼接出错
• 可添加加载失败兜底逻辑，避免路径错误时显示裂图：

<!-- 原生、Vue场景通用 -->
<img :src="`/images/${record.coin}.png`" alt="logo" onerror="this.src='/images/default.png'" />

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