如何正确设置 img href 路径？

Question

我正在更新我的个人网站，删除重复的 html 代码。当我尝试动态设置 href 元素的路径时，我运行出错了。

错误：“错误类型错误：无法设置 [object SVGImageElement] 的属性 href，它只有 getter”

所有其他 {{var}} 实例都按预期工作

抛出错误的代码：

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

工作代码：

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

数据结构：

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

Answer 1

您的价值需要引号 {{row.src}}

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

Answer 2

我相信您需要执行 [attr.href] 才能正常工作。示例如下。

<image [attr.href]="row.src" height="100%" width="100%"/>

或

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

如何正确设置 img href 路径？

How to properly set img href path?

html

javascript

css

angular