ref 标记内的图像路径未加载

Question

我在一个 Angular 项目中工作，在这个项目中我从 API 绑定图像路径。 我从 API 接收路径并尝试在 HTML 页面中显示图像。在我的情况下，src 标记内的图像路径加载良好，但 ref 路径中的图像路径未加载。

图片 1

<div class="row">
      <img id="sm001" (mouseenter)="mouseEnter($event)"  src="{{smallImages['0']['small_Images']}}" alt="img1" class="img-thumbnail" ref="bigImages['0']['big_Images']">
      <img id="sm005" (mouseenter)="mouseEnter($event)"  src="{{smallImages['1']['small_Images']}}" alt="img2" class="img-thumbnail" ref="bigImages['1']['big_Images']">
      <img id="sm002" (mouseenter)="mouseEnter($event)"  src="{{smallImages['2']['small_Images']}}" alt="img3" class="img-thumbnail" ref="bigImages['2']['big_Images']">
      <img id="sm003" (mouseenter)="mouseEnter($event)"  src="{{smallImages['3']['small_Images']}}" alt="img4" class="img-thumbnail" ref="bigImages['3']['big_Images']">
      <img id="sm004" (mouseenter)="mouseEnter($event)"  src="{{smallImages['4']['small_Images']}}" alt="img5" class="img-thumbnail" ref="bigImages['4']['big_Images']">
  </div>

在上面的代码中，src 标签图像正在加载，但 ref 标签图像没有加载。

当我像这样放置 ref="{{bigImages['4']['big_Images']}}" 时，HTML 页面不会被加载。

实际上，当我将鼠标悬停在小图像（src images）上时，它会显示大图像（参考图像）。 请指导我解决这个问题。

Answer 1

在ref 中您忘记添加{{ }}：

改变

ref="bigImages['0']['big_Images']"

到：

ref="{{bigImages['0']['big_Images']}}"
// OR
[attr.ref]="bigImages['0']['big_Images']" // I would suggest this

---

这可能会抛出错误，因为它不知道 img 标签的属性

ref="{{bigImages['0']['big_Images']}}"

所以如果你想要任何元素的任何自定义标签，你应该这样做

[attr.ref]="bigImages['0']['big_Images']"

Answer 2

试试

[attr.ref]="bigImages['0']['big_Images']"