refactor(pubUse):重构图片资源管理方式

- 使用更符合React规范的方式存放静态图片
- 图片公共方法使用静态引入的方式
master
钟良源 4 months ago
parent 5b51f3da1b
commit 3d2a44f9fe

Binary file not shown.

After

Width:  |  Height:  |  Size: 706 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 359 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 430 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 182 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 879 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 146 KiB

@ -1,15 +1,7 @@
import React, { useEffect, useState } from 'react';
import styles from '@/pages/scene/style/cover.module.less';
import { Image, Modal, List } from '@arco-design/web-react';
import scene01 from '@/public/assets/scene01.png';
// import scene02 from '@/public/assets/scene02.jpg';
// import scene03 from '@/public/assets/scene03.png';
import scene04 from '@/public/assets/scene04.png';
import scene07 from '@/public/assets/scene07.png';
// import scene08 from '@/public/assets/scene08.png';
import { getImageUrl } from '@/utils/pubUse';
const imageList = [scene01, scene04, scene07];
import { getImageUrl, imageList } from '@/utils/pubUse';
interface CoverProps {
defaultImage?: string;
@ -25,9 +17,10 @@ const Cover: React.FC<CoverProps> = ({ defaultImage, onImageChange }) => {
setCurrentImage(getImageUrl(defaultImage));
}
else {
const imageRandom = Math.floor(Math.random() * imageList.length);
setCurrentImage(imageList[imageRandom].src);
onImageChange(imageList[imageRandom].src);
const imageKey = Math.floor(Math.random() * Object.keys(imageList).length);
const imageRandom = Object.keys(imageList)[imageKey];
setCurrentImage(imageList[imageRandom]);
onImageChange(imageList[imageRandom]);
}
}, [defaultImage]);
@ -56,7 +49,6 @@ const Cover: React.FC<CoverProps> = ({ defaultImage, onImageChange }) => {
<List
grid={{ gutter: 0, span: 6 }}
size="small"
dataSource={imageList}
render={(item, index) => {
return (
<List.Item key={index}>

@ -1,21 +1,19 @@
import scene01 from '@/public/assets/scene01.png';
// import scene02 from '@/public/assets/scene02.jpg';
// import scene03 from '@/public/assets/scene03.png';
import scene04 from '@/public/assets/scene04.png';
// import scene05 from '@/public/assets/scene05.png';
import scene06 from '@/public/assets/scene06.png';
import scene07 from '@/public/assets/scene07.png';
// import scene08 from '@/public/assets/scene08.png';
const imageList: any[] = [scene01, scene04, scene06, scene07];
export const imageList = {
'scene01': '/images/scene01.png',
'scene02': '/images/scene02.jpg',
'scene03': '/images/scene03.png',
'scene04': '/images/scene04.png',
'scene05': '/images/scene05.png',
'scene06': '/images/scene06.png',
'scene07': '/images/scene07.png',
'scene08': '/images/scene08.png'
};
// 获取assets静态资源
export function getImageUrl(imageName: string) {
let imageUrl;
const name = imageName.split('.')[0];
imageList.forEach((url: any) => {
if (url.src.includes(name)) imageUrl = url.src;
});
if (imageList[name]) imageUrl = imageList[name];
return imageUrl;
}

Loading…
Cancel
Save