Как новичок в React.
Я делаю тестовое приложение для отображения полноразмерного изображения, когда пользователь щелкает миниатюру. Страница эскизов моего приложения
Но когда я щелкаю миниатюру, возвращается странный путь S3. Итак, я получаю 404 not found. Моя конфигурация - это следующий путь к содержимому S3. (образец)
onClick thumbnail Я ожидаю получить путь выше полноразмерного. но ниже возврат.
Я не знаю, откуда взялось слово «публика». Что я должен исследовать?
Это мой код
class MyPhotosList extends React.Component {
constructor(props) {
super(React.memo.props);
this.state = {
selectedPhoto: null
};
}
handlePhotoClick = (photo) => {
this.setState({
selectedPhoto: photo,
});
}
handleLightboxClose = () => {
this.setState({
selectedPhoto: null
});
}
photoItems = (props) => {
return this.props.photos.map(photo =>
<S3Image
key={photo.thumbnail.key}
imgKey={'resized/' + photo.thumbnail.key.replace(/.+resized\//, '')}
level='private'
style={{ display: 'inline-block', 'paddingRight': '5px' }}
onClick={this.handlePhotoClick.bind(this, photo.fullsize)}
/>
);
}
render() {
return (
<div>
<Divider hidden />
{this.photoItems()}
<MyLightbox photo={this.state.selectedPhoto} onClose={this.handleLightboxClose} />
</div>
);
}
}
class MyLightbox extends Component {
render() {
return (
<Modal
open={this.props.photo !== null}
onClose={this.props.onClose}
>
<Modal.Content>
<Container textAlign='center'>
{
this.props.photo ?
<S3Image
imgKey={(this.props.photo.key).replace(/.+public\//, '')}
theme={{ photoImg: { maxWidth: '100%' } }}
onClick={this.props.onClose}
/> :
null
}
</Container>
</Modal.Content>
</Modal>
);
}
}