vantui icon indicating copy to clipboard operation
vantui copied to clipboard

上传文件组件的图片预览,如果图片url没有带形如png/jpg的后缀,将会识别为文件类型,不展示图片

Open QingYuanO opened this issue 3 years ago • 1 comments

这个 Issue 涉及以下平台:

  • [ ] 微信小程序

BUG 描述 //此链接是一张图片 https://oss.reedsec.com/mall/images/202302081675827546532 image 组件识别成了文件类型 复现步骤

期望结果

实际结果

截图

环境

附加信息

QingYuanO avatar Feb 08 '23 03:02 QingYuanO

这种文件路径比较特别,可以通过 以下方式isImage解决

/* eslint-disable */
import react from 'react'
import { Uploader } from '@antmjs/vantui'

export default function Demo() {
  const [value, setValue] = react.useState([
    {
      url: 'https://oss.reedsec.com/mall/images/202302081675827546532',
      name: '图片1',
      isImage: true,
    },
    {
      url: 'https://img.yzcdn.cn/vant/tree.jpg',
    },
  ])

  const afterRead = (event) => {
    const { file, name } = event.detail
    // 可在此处新增云上传图片操作
    setValue(value.concat(file))
  }

  const deleteAction = (event) => {
    const { index } = event.detail
    const valueNew = JSON.parse(JSON.stringify(value))
    valueNew.splice(index, 1)
    setValue(valueNew)
  }

  return (
    <Uploader
      fileList={value}
      onAfterRead={afterRead}
      onDelete={deleteAction}
      deletable
    />
  )
}

zuolung avatar Feb 09 '23 07:02 zuolung