Estoy escribiendo una actualización de mi sitio web personal donde elimino el código html duplicado. Me encuentro con un error cuando intento establecer dinámicamente la ruta al elemento href.

Error: "ERROR TypeError: no se puede establecer la propiedad href de [objeto SVGImageElement] que solo tiene un captador"

Todas las demás instancias de {{var}} funcionan como se esperaba

codigo que arroja 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>

código de trabajo:

 <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>

Estructura de datos:

 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!" } ]