html中無法顯示圖片

在使用Vue框架中, 透過for循環利用axios 透過for循環 獲取伺服器的資料

其中圖片無法顯示, 看輸出的網址貼到瀏覽器上可以顯示

但在html的瀏覽器頁面中無法正常顯示,並且F12的畫面下有報錯

請問是我在哪個部分寫錯或理解問題?

 代碼如下

<script setup>
let data
function get() {
  axios.get('https://randomuser.me/api/?results=5')
    .then((result) => {
      console.log(result.data.results);
      data = result.data.results;
    })
}
</script>
<template>
  <button @click="get">按鈕</button>
  <br>
  數組表 
  <br>
  <table border="1px">
    <tr v-for="(data, index) in data">
      <td>{{ index + 1 }}</td>
      <td>{{ data.gender }}</td>
      <td>{{ data.name.last }}</td>
      <td>{{ data.picture.medium }}</td>
      <td><img src="data.picture.medium" width="35%"></td>
    </tr>
  </table>
</template>
<style scoped></style>