vue table渲染问题

Question

<template>

<div id="app">
     <table class="table">
      <thead>
        <tr >
          <th>姓名</th>
          <th>年龄</th>
          <th>头像</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" >
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
      </tbody>   
     </table>  
</div>

</template>

<script>

export default{
    data（）{
        return{
            list：[{name:"小新",age:"20"},{name:"路飞",age:"10"}]
        }
    }
}

</script>
这样table就渲染成 2行2列，还有“头像”一列是空的。
其中<span> <img src="../小新.jpg"> </span> ，
<span> <img src="../路飞.jpg"> </span>

是图片的html代码
现在要把2个 <span>生成的图像 渲染到table的“头像”列中，请问要怎么操作 ？

Answer 1

     <table class="table">
      <thead>
        <tr >
          <th>姓名</th>
          <th>年龄</th>
          <th>头像</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" >
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td><span> <img :src="item.img"> </span> </td>
      </tbody>   
     </table> 
     
  export default{
    data（）{
        return{
            list：[{name:"小新",age:"20",img:"../小新.jpg"},{name:"路飞",age:"10",img:"../路飞.jpg"}]
        }
    }
}   
     
     

Answer 2

数据返回的就是html代码的话，用 v-html 解析

数据返回图片 url 的话，用 <img :src="item.url"> 绑定