test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-03 20:39:07 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

图片展示调整

Browse Source
This commit is contained in:
2betop 2019-12-25 18:07:21 +08:00
parent 988f71eccd
commit 50d0095d65
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/renderers/Image.tsx
View File

@ -66,7 +66,7 @@ export default ThemedImage;
export interface ImageFieldProps extends RendererProps { export interface ImageFieldProps extends RendererProps {
className?: string; className?: string;
imageClassName?: string; imageClassName?: string;
placeholder?: string; placeholder: string;
description?: string; description?: string;
thumbMode: 'w-full' | 'h-full' | 'contain' | 'cover'; thumbMode: 'w-full' | 'h-full' | 'contain' | 'cover';
thumbRatio: '1-1' | '4-3' | '16-9'; thumbRatio: '1-1' | '4-3' | '16-9';
@ -75,12 +75,13 @@ export interface ImageFieldProps extends RendererProps {
export class ImageField extends React.Component<ImageFieldProps, object> { export class ImageField extends React.Component<ImageFieldProps, object> {
static defaultProps: Pick< static defaultProps: Pick<
ImageFieldProps, ImageFieldProps,
'defaultImage' | 'thumbMode' | 'thumbRatio' 'defaultImage' | 'thumbMode' | 'thumbRatio' | 'placeholder'
> = { > = {
defaultImage: defaultImage:
'https://fex.bdstatic.com/n/static/amis/renderers/crud/field/placeholder_cfad9b1.png', 'https://fex.bdstatic.com/n/static/amis/renderers/crud/field/placeholder_cfad9b1.png',
thumbMode: 'contain', thumbMode: 'contain',
thumbRatio: '1-1' thumbRatio: '1-1',
placeholder: '-'
}; };
render() { render() {
@ -94,22 +95,27 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
classnames: cx, classnames: cx,
src, src,
thumbMode, thumbMode,
thumbRatio thumbRatio,
placeholder
} = this.props; } = this.props;
const finnalSrc = src ? filter(src, data, '| raw') : ''; const finnalSrc = src ? filter(src, data, '| raw') : '';
let value = this.props.value; let value = finnalSrc || this.props.value || defaultImage;
return ( return (
<div className={cx('ImageField', className)}> <div className={cx('ImageField', className)}>
<ThemedImage {value ? (
imageClassName={imageClassName} <ThemedImage
src={finnalSrc || value || defaultImage} imageClassName={imageClassName}
title={filter(title, data)} src={value}
description={filter(description, data)} title={filter(title, data)}
thumbMode={thumbMode} description={filter(description, data)}
thumbRatio={thumbRatio} thumbMode={thumbMode}
/> thumbRatio={thumbRatio}
/>
) : (
<span className="text-muted">{placeholder}</span>
)}
</div> </div>
); );
} }