图片加载失败状态
This commit is contained in:
BIN
src/pages/File/image/error.png
Normal file
BIN
src/pages/File/image/error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user