Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

204
Views
How to properly set img href path?

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!"
        }
]
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

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

about 4 years ago · Juan Pablo Isaza Report

0

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%"/>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!