[英]React-Dropzone: I can't put my thumbnail image inside dropzone
The thumbnail preview of my image is outside of my dropzone (it shows up below). 我图像的缩略图预览在我的拖放区之外(显示在下面)。 How do I make this show up in the dropzone / instead of the dropzone?
如何使它显示在放置区/而不是放置区中?
Here's my code: 这是我的代码:
<ReactDropzone
accept="image/*"
onDrop={this.onDrop}
style={{"width" : "100%", "height" : "25vw", "background" : "lightGrey",}}
>
<Typography
color='inherit'
align='center'
syle={{"verticalAlign" : "center"}}
marginTop='20'
>
<br/><br/><br/>
<svg xmlns="http://www.w3.org/2000/svg" justifyContent="center" width="30%" height="30%" viewBox="0 0 24 24" color="white"><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
<div>Upload or Drop photo here</div>
</Typography>
</ReactDropzone>
With ReactDropzone config: 使用ReactDropzone配置:
dropzone: {
padding: theme.spacing.unit * 0,
img: {
borderRadius: '10px',
verticalAlign: 'bottom',
width: '10',
maxHeight: '95%'
}
I put it in the <ReactDropzone>
component: 我将其放在
<ReactDropzone>
组件中:
<Dropzone
className = 'defaultDropzone'
accept={acceptedFileTypes}
onDrop={this.handleOnDrop}
maxSize={imageMaxSize}
>
{files.length > 0 ? <img src = {files[0].preview} /> :
<div className = "dropzone">
<i className= 'fa fa-cloud-upload'/>
<span> Drop file or click here to upload photo </span>
</div>
}
</Dropzone>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.