How to use [src] in non-Angular elements?

Question

I am using A-Frame in Angular 2.

When I put image link directly in src,

<a-scene>
  <a-curvedimage src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg" position="0 2 0"></a-curvedimage>
</a-scene>

it works well. working plunker

However, if I am using

  <a-scene>
    <a-curvedimage [src]="url" position="0 2 0"></a-curvedimage>
  </a-scene>

with

  url = 'https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg';

It won't give me any error, but it also does not show the image. issue plunker.

How can I solve this issue or any walkaround way? Thanks!

pkozlowski.opensource · Accepted Answer · 2016-10-08 12:49:31Z

4

I'm not sure what properties the a-curvedimage element has at runtime but it might be the case that it doesn't have the src property that would reflect value of the src attribute. In this case your best option might be binding to the src attribute like so: <a-curvedimage [attr.src]="url" position="0 2 0"></a-curvedimage>

Keep in mind that elements rendered in a browser can have both attributes and properties and Angular distinguishes bindings to those. Most of the time an attribute and the corresponding property names are the same so the difference doesn't matter. Still, there are elements where attributes and property names don't match so you need to be precise in your Angular binding syntax.

answered Oct 8, 2016 at 12:49

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use [src] in non-Angular elements?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related