宜搭图片组件 动作设置 获取图片URL，代码怎么写

3.0报表直接展示图片仅支持新建应用下的报表应用，当旧应用内的3.0报表想实现展示图片，需通过下述方法侧方面实现。

 新建动作获取图片地址： 首先，在表单页面点击图片上传组件，选择高级，动作设置里的新建动作，然后选择 onSuccess 上传成功

参考代码如下（注意修改单行文本唯一标识）：

export function onSuccess(file, value) {   this.$("单行文本组件的唯一标识").setValue("http://www.aliwork.com" + file.imgURL)   console.log('onSuccess', file, value); }

提交表单数据效果图：

通过新建动作，我们可以在用户操作了当前字段组件时，做一些动作，比如当用户编辑完当前字段去编辑下一个字段之前，触发一次数据打点功能。如图：

新增动作并不会影响当前字段组件的原始动作，比如，当我们设置了组件必填，那么当前组件失去焦点时，我们一样会去做校验，也一样会触发当前动作设置中的函数。
具体可参考：JS 动作面板 - 前端代码开放:https://docs.aliwork.com/docs/yida_support/lbtl0t/ocmxyv

楼主你好，获取图片URL可以通过action属性设置，在action中定义一个方法来获取URL。

代码示例：

<template>
  <yd-image :src="imageSrc" @load="handleLoad" @error="handleError" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: "https://picsum.photos/200/300" // 默认图片URL
    };
  },
  methods: {
    // 获取图片URL的方法
    getImageUrl() {
      // 通过异步请求获取URL
      return new Promise(resolve => {
        // 假设请求返回的数据为 { imageUrl: "xxx" }
        setTimeout(() => {
          resolve({ imageUrl: "https://picsum.photos/400/600" });
        }, 1000);
      });
    },
    // 图片加载成功的回调
    handleLoad() {
      console.log("图片加载成功");
    },
    // 图片加载失败的回调
    handleError() {
      console.log("图片加载失败");
    }
  },
  // 组件挂载前获取图片URL并更新imageSrc
  async beforeMount() {
    const { imageUrl } = await this.getImageUrl();
    this.imageSrc = imageUrl;
  }
};
</script>

上面的示例中，通过beforeMount钩子函数在组件挂载前获取图片URL，并更新imageSrc。getImageUrl方法中模拟了异步请求获取URL的过程，使用Promise进行了包装。

在template中，通过yd-image组件将图片展示出来，并在@load和@error事件中触发对应的回调函数。

此外，还可以通过通过动态绑定src属性来动态获取图片URL：

<template>
  <yd-image :src="getImageUrl()" @load="handleLoad" @error="handleError" />
</template>

<script>
export default {
  methods: {
    // 获取图片URL的方法
    getImageUrl() {
      // 通过异步请求获取URL
      return new Promise(resolve => {
        // 假设请求返回的数据为 { imageUrl: "xxx" }
        setTimeout(() => {
          resolve({ imageUrl: "https://picsum.photos/400/600" });
        }, 1000);
      });
    },
    // 图片加载成功的回调
    handleLoad() {
      console.log("图片加载成功");
    },
    // 图片加载失败的回调
    handleError() {
      console.log("图片加载失败");
    }
  }
};
</script>

此时在yd-image组件中，src属性的值为获取图片URL的方法，也就是说每次加载图片时都会动态获取图片URL。