如何在vuetify / vuse中的v对话框中显示图像？

Question

当某人单击v-data-table中的缩略图时，我想在v-dialog中显示完整图像。但是我出现了黑屏。

代码如下：

<v-data-table>
  <template v-slot:item.profilePicture.thumbnail.url="{ item }">
    <v-btn icon @click="view(item)">
      <vuse-avatar size="40" :src="require('@/assets/media/' + item.profilePicture.thumbnail.url)" />
    </v-btn>
  </template>
....
</v-data-table>

这是对话框：

<v-dialog
   v-model="dialog"
     width="500"
        >
        <v-card>
          
          <v-card-text>
            
            <img :src="require('@/assets/media/' + image)" />
          
          </v-card-text>
  
          <v-divider></v-divider>
  
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              
              @click="dialog = false"
            >
              Close
            </v-btn>
          </v-card-actions>
        </v-card>
    </v-dialog>

这是脚本：

view (it) {
    this.dialog = true;
    this.image = it.profilePicture.thumbnail.url;
}

假服务器中的json看起来像这样：

{
"users": [
    {
        "id": "bc9dbf11-1bd8-4a81-8faf-60c109c4963e",
        "username": "testuser1",
        "mobilenumber": "+911234567890",
        "profile": {
            "firstname": "test",
            "lastname": "user"
        },
        "profilePicture": {
            "thumbnail": {
                "url": "profile1.jpg"
            }
        }
    }
]
}

感谢您的帮助。