render函数处理动态获取img的src属性

最新推荐文章于 2025-05-10 14:14:45 发布

weixin_34199335

最新推荐文章于 2025-05-10 14:14:45 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript c# 后端 ViewUI

原文链接：https://juejin.im/post/5b83e4996fb9a019cb3cdda6

博客主要描述了使用iview的上传文件Upload组件动态添加图片时遇到的问题，能拿到返回的图片路径，但赋值给img的src时却为空，还提到了Vue.set方法及render函数处理img的src属性，欢迎指正问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述: 用iview的上传文件Upload组件写动态添加图片,可以拿到返回的图片路径,赋值给img的src时一直为空

1, 效果图,布局代码没粘贴

2, 实现效果,点击上传按钮上传图片成功之后把图片显示出来

{
        title: '产品图片',
        key: 'filePath',
        render: (h, params) => {
            return h('div', [
              h('Upload', {
                props: {
                  ref: 'upload',
                  type: 'drag',
                  showUploadList: false,
                  onSuccess: (res, file) => { // 上传方法要写在这里面,对应每一行的数据
                    if (file && file.response.result) {
                      let files = file.response.result[0].link // 上传成功之后获取的图片路径
                      // params.row.filePath = files //1: 点击上传成功之后,获取的图片路径,可以拿到值,但是这样赋值给不到img的src
                      this.$set(params.row, 'filePath', files) // 2: 必须这样写,用vue的set方法
                    }
                  },
                  action: 'http://XXXXXXX/UploadFile' // 上传图片路径
                }
              }),
              h('img', {
                style: {
                  width: '100%',
                  height: '100%',
                  borderRadius: '4px'
                },
                attrs: {
                  src: params.row.filePath // 如果是1那种写法,不能实时获取,获取的还是undefined
                }
              })
            ])
          }
      }
复制代码

3, Vue.set( target, key, value )方法: Vue.set

    1,Vue.set( target, key, value ) 是全局注册
    
    2,this.$set( target, key, value ) 是局部注册
复制代码

备注: 如有问题,欢迎指正

本文为原创,如需转载请注明出处: render函数处理img的src属性