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 tag图像没有加载。

当我把ref =“{{bigImages ['4'] ['big_Images']}}”这样时，HTML页面就不会被加载。

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

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']"

ref tag内的图像路径未加载

2 个答案: