图片加载失败状态

This commit is contained in:
宇阳
2025-01-10 20:23:22 +08:00
parent 443cd04e92
commit fdf96d8ba0
2 changed files with 5 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -10,6 +10,7 @@ import { PiKeyReturnFill } from "react-icons/pi";
import { DeleteOutlined, DownloadOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, UndoOutlined, ZoomInOutlined, ZoomOutOutlined, } from '@ant-design/icons'; import { DeleteOutlined, DownloadOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, UndoOutlined, ZoomInOutlined, ZoomOutOutlined, } from '@ant-design/icons';
import Masonry from "react-masonry-css"; import Masonry from "react-masonry-css";
import "./index.scss" import "./index.scss"
import errorImg from './image/error.png'
const breakpointColumnsObj = { const breakpointColumnsObj = {
default: 4, default: 4,
@@ -53,9 +54,7 @@ export default () => {
const onDeleteImage = async (data: File) => { const onDeleteImage = async (data: File) => {
setLoading(true) setLoading(true)
let filePath = data.url.replace(/^https?:\/\//, ''); await delFileDataAPI(data.url)
await delFileDataAPI(filePath)
message.success("🎉 删除图片成功") message.success("🎉 删除图片成功")
getFileList(dirName) getFileList(dirName)
setFile({} as File) setFile({} as File)
@@ -129,12 +128,13 @@ export default () => {
key={index} key={index}
className={`group relative overflow-hidden rounded-md cursor-pointer mb-4 border-2 border-[#eee] dark:border-transparent hover:!border-primary p-1 ${file.url === item.url ? 'border-primary' : 'border-gray-100'}`} className={`group relative overflow-hidden rounded-md cursor-pointer mb-4 border-2 border-[#eee] dark:border-transparent hover:!border-primary p-1 ${file.url === item.url ? 'border-primary' : 'border-gray-100'}`}
onClick={() => viewOpenFileInfo(item)}> onClick={() => viewOpenFileInfo(item)}>
<Image <Image
src={item.url} src={item.url}
alt=""
className='w-full rounded-md' className='w-full rounded-md'
loading="lazy" loading="lazy"
preview={false} preview={false}
fallback={errorImg}
/> />
</div> </div>
) )
@@ -201,6 +201,7 @@ export default () => {
<Image <Image
src={file.url} src={file.url}
className='rounded-md object-cover object-center' className='rounded-md object-cover object-center'
fallback={errorImg}
preview={{ preview={{
onVisibleChange: (visible) => setOpenFilePreviewDrawer(visible), onVisibleChange: (visible) => setOpenFilePreviewDrawer(visible),
visible: openFilePreviewDrawer, visible: openFilePreviewDrawer,