网络地址图片预览 - 自动获取后缀
前端

图片

图片预览

分享一个用到的图片预览功能

<el-image
:preview-src-list="[state.showCompanyDetail.business_license]"
:src="previewRenderFormatterImg(state.showCompanyDetail.business_license)"
alt="Business License"
class="business-license"
>
  
</el-image>

web/src/views/backend/routine/attachment/index.ts

export const previewRenderFormatterImg = (row: string) => {
    const cellValue = row.substring(row.lastIndexOf(".") + 1);
    const imgSuffix = ['gif', 'jpg', 'jpeg', 'bmp', 'png', 'webp']
    if (imgSuffix.includes(cellValue)) {
        return row
    }
    return buildSuffixSvgUrl(cellValue)
}

url给到：http://localhost:8000/storage/default/20240129/xxxx.jpg

record

这家伙很懒，什么也没写~

7月前

好东西，支持！

赞同(0)

lzlshow

这家伙很懒，什么也没写~

7月前

不错不错，如果能把全部代码贴出啊出更好

赞同(0)

Champangne回复lzlshow

这家伙很懒，什么也没写~

7月前

函数和调用方法都贴出来了呀，我使用的场景是在原本buildadmin的限制了表格里面字段的预览，然后增加了一个previewRenderFormatterImg函数，这个可以存在任何文件里面，然后调用这个传入url就可以了。

例：

<el-image
:preview-src-list="[state.img]"
:src="previewRenderFormatterImg(state.img)"
>
  
</el-image>

import { reactive } from 'vue'
// 这里要引入 previewRenderFormatterImg 
const state = reactive({
    img: "http://localhost:8000/storage/default/20240129/xxxx.jpg",
})

赞同(0)