vue el-upload img 动态src网络图片不显示

最新推荐文章于 2025-05-19 23:07:30 发布

原创最新推荐文章于 2025-05-19 23:07:30 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

博客主要讲述了使用el-upload上传图片到服务器，获取图片链接后绑定变量但图片无法展示的问题。通过this.$ref.img1.src强制替换为服务器图片链接解决展示问题，还提到网络图片与本地图片处理方式不同，表单提交时仍按原方式处理。

el-upload 上传到服务器，并返回图片链接http://localhost:9000/1.png

<div class="upload-container">
<el-upload
  action='http://localhost:9001/uploadFile'
  :multiple="false"
  :show-file-list="false"
  :on-success="uploadSuccess"
  class="image-uploader"
  drag
>
  <i class="el-icon-upload" />
  <div class="el-upload__text">
    将文件拖到此处，或<em>点击上传</em>
  </div>
</el-upload>
<div class="image-preview">
  <div class="image-preview-wrapper" v-show="postForm.image_uri != null">
    <img v-bind:src="postForm.image_uri"  ref="img1"/>
    <div class="image-preview-action">
      <i class="el-icon-delete" @click="rmImage" />
    </div>
  </div>
</div>
</div>

uploadSuccess 变量成功绑定上了，打印、断点都可查看到，但是图片确不展示出来。就通过this.$ref.img1.src 来强制替换为服务器图片链接，成功了

uploadSuccess(path){
  console.log(path)
  if (path != 'error'){
    this.postForm.image_uri = path
    // 解决网络图片 绑定不生效的问题
    this.$refs.img1.src = path
    this.$message({
      message: '图片上传成功',
      type: 'success'
    })
  }
  else{
    console.log("上传文件失败了")
  }
},
rmImage() {
  this.postForm.image_uri = null
  this.$refs.img1.src = ''
},