Pass image source url as string to component

Question

I have this component:

icon.component.ts:

import { Component, Input } from "@angular/core";

@Component({
   selector: "icon",
   styleUrls: ["dist/app/components/shared/subcomponents/icon.component.css"],
   templateUrl: "dist/app/components/shared/subcomponents/icon.component.html",
})
export class IconComponent {
   @Input() public imgSrc: string;
}

icon.component.html:

<img src="{{ imgSrc }}" class="pull-xs-left icon card-icon" />

So the imgSrc needs to be passed to it by the parent in html.

usage in another component:

<icon [imgSrc]="dist/resources/images/heart.png"></icon>

error:

EXCEPTION: Uncaught (in promise): Error: Error in dist/app/components/results-page/result-image.component.html:3:12 caused by: Cannot read property 'png' of undefined
TypeError: Cannot read property 'png' of undefined
    at CompiledTemplate.proxyViewClass.View_ResultImageComponent0.detectChangesInternal (/FindPageModule/ResultImageComponent/component.ngfactory.js:93:113)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9355:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9448:48)
    at CompiledTemplate.proxyViewClass.View_ResultDetailsComponent0.detectChangesInternal (/FindPageModule/ResultDetailsComponent/component.ngfactory.js:318:20)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9355:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9448:48)
    at CompiledTemplate.proxyViewClass.View_ResultsComponent0.detectChangesInternal (/FindPageModule/ResultsComponent/component.ngfactory.js:127:20)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9355:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9448:48)
    at CompiledTemplate.proxyViewClass.View_FindPageComponent0.detectChangesInternal (/FindPageModule/FindPageComponent/component.ngfactory.js:91:19)

I have tried to escape the . like:

[imgSrc]="dist/resources/images/heart\.png"

However that lead to the html parse error \.

How do I pass the url string to <icon> without getting errors?

Paul Samsotha · Accepted Answer · 2016-12-31 06:25:09Z

4

Get rid of the []. This will cause angular to try and evaluate the value you pass to it. Without the brackets, the value will get treated like a string, which is what you want

imgSrc="dist/resources/images/heart.png"

Or if you use the brackets, then you need to use quotes, so angular evaluated it as a string

[imgSrc]="'dist/resources/images/heart.png'"

answered Dec 31, 2016 at 6:25

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

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

Comments

micronyks · Accepted Answer · 2016-12-31 06:48:56Z

2

I don't know why you require to pass it as a string when you could use it as binding follow,

<img [src]="imgSrc"     //<<<----- removed curly braces and added [] around src attribute
     class="pull-xs-left icon card-icon" />

in child component use it likem

<whateverChild [imgSrc]="imgSrc"></whateverChild>

here I'm wrapping imgSrc (or use other name if angular2 doesn't allow you to use the same name as not sure) by [] which allows me to use/pass binding value. If I know string value, I can also use it like

<whateverChild imgSrc="'static path/string'"></whateverChild>

this syntax will only pass static string as it is wrapped by single quote and other side I don't force angular2 pass value with binding value that is[].

So in short : [] -for angualr2 bindings and no [] -for static value

For some clarification after reading above post if you plan to pass imgSrc like this,

 <whateverChild [imgSrc]="'imgSrc'"></whateverChild>

then it will pass imgSrc as a string and not the value it contains.

I hope you get it what I'm trying to say.

edited Dec 31, 2016 at 6:48

answered Dec 31, 2016 at 6:28

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

4 Comments

BeniaminoBaggins Over a year ago

I may not understand. Won't <whateverChild [imgSrc]="imgSrc"></whateverChild> have the same issue I had? Are you using [] to pass an image source to the child in this example?

micronyks Over a year ago

I believe you want to bind same img in child too. You can use it. wrapping src or imgSrc by [] tells compiler to use binding(dynamic) value and not static value.

micronyks Over a year ago

I'm not 100% sure whether it works as you use same name imgSrc. For that you can play with it and change the name if name conflict happens. other than name, it will work as expected. what other answer suggests is to pass value as a static value by wrapping it with single quote(').

BeniaminoBaggins Over a year ago

I am just wanting to pass the static string. Thanks for the info though.

Collectives™ on Stack Overflow

Pass image source url as string to component

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related