Vuetify-图像加载失败

Question

我想要做的是在页面上显示图像。我已将其路径存储在后端（MySQL）中，并在获取后将其放入 <v-img> 的 src 中，但发生错误时说-

[Vuetify] Image load failed

src: userImage

found in

---> <VImg>
       <Anonymous>
         <VContent>
           <VApp>
             <App> at src/App.vue
               <Root>

编辑 - 这是我的 Profile.js 文件

<template>
<v-container >
      <div class="headline">Your Profile</div>
      <br><br>
      <div class="title">Username-</div>
      <v-text-field
      v-model="user.username"
      placeholder="Username"
      required
    ></v-text-field>
    <div class="title">Password-</div>
    <v-text-field
      v-model="user.password"
      placeholder="Password"
      required
    ></v-text-field>
    <div class="title">Avatar-</div>
    <v-img
      v-bind:src="userImage"
      aspect-ratio="1"
      class="grey lighten-2"
      max-width="150"
      max-height="150"
    ></v-img>
    <div class="title">Email-</div>
    <v-text-field
      v-model="user.email"
      placeholder="Email"
      required
    ></v-text-field>

</v-container>
</template>

Answer 1

确保绑定src属性：<v-image v-bind:src="userImage" />

如您所见here 和here，该消息是由浏览器本身引发的onerror 事件生成的，因此这意味着图像 URL 有问题（带有此 URL 的图像不在服务器上）。检查呈现的 URL，尝试复制它并在浏览器中打开...