Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

205
Vistas
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 Respuestas
Responde la pregunta

0

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

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

about 4 years ago · Juan Pablo Isaza Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda