How to properly set img href path?-CodePudding

I am writing an update to my personal website where I remove duplicate html code. I am running into an error when I try to dynamically set the path to the href element.

Error: "ERROR TypeError: Cannot set property href of [object SVGImageElement] which has only a getter"

All other {{var}} instances work as expected

code that throws error:

<div  *ngFor="let row of json" >
         <div >
           <h2 >{{row.title}}</h2>
           <p >{{row.subTitle}}</p>
         </div>
         <div >
           <svg  width="500" height="500" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"  >
            <image href={{row.src}} height="100%" width="100%"/>
          </svg>
         </div>
         </div>

working code:

 <div  *ngFor="let row of json" >
      <div >
        <h2 >{{row.title}}</h2>
        <p >{{row.subTitle}}</p>
      </div>
      <div >
        <svg  width="500" height="500" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"  >
         <image href="/assets/images/hiking.JPG" height="100%" width="100%"/>
        </svg>
      </div>
      </div>

Data Structure:

json = [
        {
        src: "/assets/images/hiking.JPG",
        textSpacing:"",
        photoSpacing:"",
        title:"Hiking",
        subTitle:"I love exploring with friends. The ability to be in untouched protected nature is something I value deeply. Most recent trip: Yosemite and Sequoia national parks. Hiker Pro Tip: Drop a GPS pin on your phone at the trailhead"
        },
        {
        src: "/assets/images/Skiing.png",
        textSpacing:"order-md-2",
        photoSpacing:"order-md-1",
        title:"Skiing",
        subTitle:"I recently picked up skiing as an adult. This past winter I was able to go to Colorado to Ski in the mountains. Amazing!"
        }
]

CodePudding user response：

You need quotes around your value {{row.src}}

<image href="{{row.src}}" height="100%" width="100%"/>

CodePudding user response：

I believe you would need to do the [attr.href] for this to work. Example shown below.

<image [attr.href]="row.src" height="100%" width="100%"/>

Or an alternative that I think will work is ng-href example from w3schools. Example shown below.

<image ng-href="row.src" height="100%" width="100%"/>