<script setup> import { ref } from "vue"; import router from "@/router"; // import { formatDate } from "@/utils/filter" import moment from 'moment' import httpApi from "@/http"; const form = ref({ content: "", pic: "", time: "", uid: "", }); const dates = moment().format('YYYY-MM-DD') // const message = ref('') function handleAvatarSuccess(res, file) { console.log(res, file); form.value.pic = res.data; console.log(form.value.content); console.log(form.value.pic); } function beforeAvatarUpload(file) { const isJPG = file.type === "image/jpeg"; const isPNG = file.type === "image/png"; const isJPG1 = file.type === "image/jpg"; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG && !isPNG && !isJPG1) { this.$message.error("上传头像图片只能是 JPG 格式!"); } if (!isLt2M) { this.$message.error("上传头像图片大小不能超过 2MB!"); } return (isJPG || isPNG || isJPG1) && isLt2M; } function submit(){ // console.log(form.content); // console.log(form.pic); // console.log(dates); const params = { // content: message.value, // pic: form.pic, time: dates, uid: '5' } httpApi.communityApi.addComunity(params).then(res=>{ console.log(res); }) } //取消发布 const returncomit = () => { router.push("/home/community"); }; </script> 图片不显示

从你提供的代码来看，可能是因为你没有在模板中正确地绑定图片的地址导致图片无法显示。

在 Vue3 中，可以使用 `v-bind` 或者简写的 `:` 来绑定属性。对于图片地址，你应该将其绑定到 `img` 标签的 `src` 属性上。例如：

<template>
  <div>
    <img :src="form.pic" alt="图片">
  </div>
</template>

这里假设 `form.pic` 是一个响应式的数据，它存储了图片的地址。

如果图片还是无法显示，可能是因为图片地址不正确或者服务器没有正确地返回图片数据。你可以在浏览器的开发者工具中查看网络请求，确保服务器返回的图片数据是正确的，并且地址也是正确的。

另外，从你的代码中可以看到，你使用了 Element UI 的 `this.$message` 方法，但是在 `<script setup>` 中无法直接访问 Vue 实例上的方法和属性。如果需要使用 Element UI 的组件或者方法，你需要在 `<script setup>` 中导入对应的组件或者方法。例如：

<template>
  <div>
    <!-- ... -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router'
import moment from 'moment'
import httpApi from '@/http'
import { ElMessage } from 'element-plus'

const form = ref({
  content: '',
  pic: '',
  time: '',
  uid: '',
})
// ...

function beforeAvatarUpload(file) {
  // ...
  if (!isJPG && !isPNG && !isJPG1) {
    ElMessage.error("上传头像图片只能是 JPG 格式!")
  }
  if (!isLt2M) {
    ElMessage.error("上传头像图片大小不能超过 2MB!")
  }
  // ...
}

// ...
</script>

这里我们通过 `import { ElMessage } from 'element-plus'` 导入了 `ElMessage` 组件，然后在 `beforeAvatarUpload` 方法中使用 `ElMessage.error` 方法来显示错误信息。