uni-app中可以存放gif图的容器 使得图片不被压缩，不要view-image标签 ，不能覆盖原生弹窗？

  • Z时代
  • 2024-03-04
  • 分类：IT

通过微信上传文件时，需要放置一个gif占位符，但是当上传文件不符合要求时，需要有弹窗进行提示。尝试使用view-image容器放置gif 使得图片不压缩，但是原生元素被遮盖，最后将标签换为普通的image标签。

uni-app中可以存放gif图的容器 使得图片不被压缩，不要view-image标签 ，不能覆盖原生弹窗？
其实就是一个上传文件的功能，页面展示的时候需要有一个gif图占位，当文件类型不符合规范时需要有弹窗提示

回答：

可以使用uni-app中的uni-Image组件来展示GIF图片，并且可以设置lazy-load属性来避免图片被压缩。同时，使用uni-dialog组件可以实现弹窗提示，而不会遮盖原生元素。具体的示例代码如下：

<template>
  <view>
    <!-- 使用uni-Image组件展示GIF图片 -->
    <uni-image src="gif图片地址" lazy-load></uni-image>
    <!-- 点击按钮触发弹窗提示 -->
    <button @click="showDialog">提示</button>
    <!-- 使用uni-dialog组件实现弹窗提示 -->
    <uni-dialog title="提示" :show.sync="dialogVisible">
      <view>上传文件不符合要求，请重新上传。</view>
    </uni-dialog>
  </view>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false // 控制弹窗是否显示
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

需要注意的是，uni-Image组件只能展示静态GIF图片，如果需要展示动态的GIF图片，可以考虑使用第三方组件库，例如uview-ui中的u-gif组件。但是需要注意的是，这种方式可能会影响图片的加载速度和性能，需要根据实际情况进行选择。

回答：

在说什么？可以提供一些其他信息（比如说你的代码）

微信上传图片压缩说的是 exif 信息丢失？不使用sdk选择文件，使用input选择文件，然后formdata 上传就不会丢失信息了

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

原生元素被遮盖是指什么元素被遮盖？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

以上是 uni-app中可以存放gif图的容器 使得图片不被压缩，不要view-image标签 ，不能覆盖原生弹窗？ 的全部内容， 来源链接： utcz.com/p/933885.html

回到顶部