关于#vue.js#的问题：修改用户信息功能图片无法回显，数据库中只存了一张图片（相关搜索：字符串）

Question

修改用户信息功能图片无法回显，并且报错，如何修改，数据库中只存了一张图片，并且是字符串格式，我希望可以回显图片，并且具有修改功能。

<template>

  <topview message="修改个人信息"></topview>
  <div>
    <div style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 10px;
      ">
      <van-form @submit="onSubmit">
        <div>
        </div>
        <van-cell-group inset>
          <van-field v-model="userinfo.userName" name="用户名" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="userinfo.userPassword" type="password" name="密码" label="密　码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
          <van-field v-model="userinfo.userPhone" type="text" name="手机号" label="手机号" placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]" />
          <van-field v-model="userinfo.userNickname" type="text" name="昵称" label="昵称" placeholder="昵称"
            :rules="[{ required: true, message: '请填写昵称' }]" />
          <van-field name="userSex" label="性别:">
            <template #input>
              <van-radio-group v-model="userinfo.userSex" direction="horizontal">
                <van-radio name="男">男</van-radio>
                <van-radio name="女">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field v-model="userinfo.userUsername" type="text" name="身份证" label="身份证" placeholder="身份证"
            :rules="[{ required: true, message: '请填写身份证' }]" />
            <img :src="userinfo.userPic" alt="User Avatar" class="photo1" v-if="userinfo.userPic" />
          <van-field name="userPic" label="头像上传">
            <template #input>
              <van-uploader v-model="userinfo.userPic" :after-read="afterRead" :max-count="1" />
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            修改
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import topview from '@/components/topView.vue';
import { ref, reactive, onMounted } from "vue";
import { getUserApi,editUserApi } from "@/api";
import { useCounterStore } from "@/stores/counter";
import { useRouter } from "vue-router";
//返回
const backbtn = () => {
  window.history.back();
};
//上传图片
const afterRead = () => {
};
const store = useCounterStore();
const router = useRouter();

const userinfo = ref({});
//用户信息回显
const getUser = async (e) => {
  const res = await getUserApi(e);
  userinfo.value = res.data;
  console.log('用户信息查询',userinfo.value)
};

onMounted(() => {
  getUser(store.userInfo.userId);

});
</script>

<style scoped>
.photo1 {
  width: 100px;
  height: 100px;
  border-radius: 50px
}
</style>

Answer 1

以下回复引自免费微信小程序：皆我百晓生。 如问题解决，还请采纳。如仍有疑问，请回复留言或私信博主，以便获得更精准的帮助。

在VUE.JS项目中，当用户想要查看自己的个人信息时，系统可能会自动加载一张图片作为展示内容。然而，在实际操作中，如果用户的浏览器不支持或者网络不稳定，那么图片可能无法正常显示。这种情况下，我们可以通过一些方法来解决这个问题：

1. 使用异步加载：为了提高用户体验，我们可以尝试使用异步加载图片的方法。这通常需要在组件挂载之前进行，这样即使服务器响应延迟也能够完成同步加载。

2. 使用PROMISE和THEN()函数：如果直接在DOM上获取图片的返回值有问题，也可以使用PROMISE和THEN()函数来处理这个情况。然后通过THIS.$EMIT('IMAGE-SUCCESS', IMAGE)发送消息给父组件，告诉它已经成功加载了图片。

3. 使用AXIOS请求：如果你希望从服务器获取图片并保存到本地，可以考虑使用AXIOS请求。这种方式更加安全，因为AXIOS会加密数据以防止跨域攻击。

4. 配置缓存和路由：如果在某些地方依赖于图片的内容，可以在路由模块中设置一个预览区域。例如：

   IMPORT { USEROUTER } FROM 'VUE-ROUTER';
   CONST ROUTER = USEROUTER();
   
   ASYNC FUNCTION HANDLEIMAGESUCCESS(IMAGE) {
     // 处理图片加载完毕后的逻辑...
     AWAIT THIS.$STORE.DISPATCH('UPDATEUSERINFO', { ... });
     THIS.$ROUTER.PUSH('/PROFILE');
   }
   

5. 检查浏览器兼容性：确保你的浏览器支持HTML5 IMAGE API，因为只有HTML5 IMAGE API才允许你动态地添加图片到页面元素中。

6. 测试环境：在生产环境中，你可以使用第三方库如@VANT/UPLOAD来模拟服务器端的文件上传功能。

通过以上方法，你可以在不影响用户体验的情况下，解决用户查看个人信息时出现的问题。