Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

207
Visualizações
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 Respostas
Responde à pergunta

0

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

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

about 4 years ago · Juan Pablo Isaza Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda