代码之家 › 专栏 › 技术社区 › Nikson

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

angular html

Nikson · 技术社区 · 7 年前

我在一个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={{bigmages['4']['big\u Images']}}时,不会加载HTML页面。

实际上,我正在尝试的是,当我将鼠标悬停在小图像(src图像)上时,它将显示大图像(ref图像)。请引导我解决这个问题。

2 回复 | 直到 7 年前

Vivek Doshi 7 年前

在里面 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']"

Praveen Kumar 7 年前

尝试

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前