How to properly set img href path?

Issue

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 class="row featurette" *ngFor="let row of json" >
         <div class="col-md-7 {{row.textSpacing}}">
           <h2 class="featurette-heading">{{row.title}}</h2>
           <p class="lead">{{row.subTitle}}</p>
         </div>
         <div class="col-md-5 {{row.photoSpacing}}">
           <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" 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 class="row featurette" *ngFor="let row of json" >
      <div class="col-md-7 {{row.textSpacing}}">
        <h2 class="featurette-heading">{{row.title}}</h2>
        <p class="lead">{{row.subTitle}}</p>
      </div>
      <div class="col-md-5 {{row.photoSpacing}}">
        <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" 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!"
        }
]

Solution

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

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

Answered By - FortyGazelle700