如何在angular html中动态更新SVG Image href？

2024-05-03 • 问答

我正在遍历每个对象都有imageUrl的员工对象列表，我需要在svg-Image

中使用该图像URL

<div *ngFor ="emp of employees">
        <defs>
         <pattern id = "attachedImage" height = "100%" width = "100%" patternContentUnits = "objectBoundingBox">
            <image href="{{emp.ImageUrl}}"  preserveAspectRatio = "none" width = "1" height = "1"/>
        </pattern>
        </defs>
        <circle cx = "50%" cy = "50%" r = "35%" fill = "url(#attachedImage)"/>
    </div>

我不想遍历JS中的所有html元素。即使我愿意，我也想映射适当的图像

有什么办法可以在此图片中动态添加该网址我尝试使用{{emp.ImageUrl}}无效。

这是工作示例的网址，其中我已对该网址进行了硬编码 https://stackblitz.com/edit/angular-pq6r2w

我要动态添加网址

任何建议将不胜感激！

标记中的问题是，您对所有图案图像重复使用相同的id。结果，以所有形状示出了第一图像。您可以使用ngFor循环索引来使每个id不同：

<div *ngFor="let emp of employees; let i = index">
  ...
  <svg class="circle-chart" ...>
    ...
    <g class="circle-chart__info">
      <defs>
        <pattern [id]="'attachedImage_' + i" ... >
          <image [attr.xlink:href]="emp.ImageUrl" ... />
        </pattern>
      </defs>
      <circle [attr.fill]="'url(#attachedImage_' + i + ')'" ... />
    </g>
  </svg>
</div>

您可以在this stackblitz中看到结果。请注意，我还在第二张图片上设置了https协议，以使其在视图中可见。

我不太确定这是否是正确的解决方案，但对我有用。

您可以这样尝试：

[src]=emp.ImageUrl

如何在angular html中动态更新SVG Image href？

lucky123w 回答：如何在angular html中动态更新SVG Image href？

大家都在问