Я знаю, что это, вероятно, кажется тривиальным, но я новичок ie, и мне явно чего-то не хватает.
Я пытаюсь создать массив, состоящий из объектов JSON, которые нужно передать реагировать-изображение-галерея. См. Здесь NPM react-image-gallery
Согласно этой веб-странице, мне нужно сделать что-то вроде:
const images = [
{
original: 'https://picsum.photos/id/1018/1000/600/',
thumbnail: 'https://picsum.photos/id/1018/250/150/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
thumbnail: 'https://picsum.photos/id/1015/250/150/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
thumbnail: 'https://picsum.photos/id/1019/250/150/',
},
];
class MyGallery extends React.Component {
render() {
return <ImageGallery items={images} />;
}
}
Однако, обратите внимание, я не использую миниатюру, поэтому мне нужен только оригинал.
Вот мой код:
import React, { Fragment, useState } from 'react';
import axios from 'axios';
import ImageGallery from 'react-image-gallery';
//import '../image-gallery.css'
import "react-image-gallery/styles/css/image-gallery.css";
const AddNewItem = () => {
var [fileState, setFile] = useState([]);
var fileObj = {};
//bunch of irrelevant code
//Image Preview
const onChange = e => {
//setFile(e.target.files[0]);
fileObj = e.target.files[0];
console.log("AddNewItem fileObj: ", fileObj)
setFile(fileState => [...fileState, JSON.parse(`"orignal: ${URL.createObjectURL(fileObj)}"`)]);
}
//bunch of irrelevant code
return (
< Fragment >
{console.log("AddNewItem onChange fileState: ", fileState)}
<form id="myForm" onSubmit={onSubmit}>
<div className="container">
<div className="row ">
<div className="col">
<label className="mt-3 mb-0">Image:</label><br />
<input type="file" id="image" name="image" onChange={onChange}></input><br />
<button type="submit" className="mt-3">Submit</button>
</div>
<div className="col">
{fileState.length > 0 ? <ImageGallery items={fileState} showThumbnails={false} /> : ""}
</div>
</div>
</div>
</form>
</Fragment >
);
Когда я загружаю свое первое изображение, значение fileState равно следующему, и я получаю Failed Ошибка типа опоры:
When I upload a second image, fileState looks like:
Изображение, показывающее fileState с 2 изображениями
И когда в fileState 2 изображения, я не получаю ошибку.
И никакие изображения не отображаются галереей. Я получаю стрелку и кнопку воспроизведения / паузы, но не вижу изображений. Но я не совсем уверен, что импортировал галерею изображений. css правильно в соответствии с веб-страницей npm, упомянутой выше. Но если это проблема, я задам здесь еще один вопрос.
Я делаю что-то не так в том, как я создаю fileState? Если да, что я могу сделать, чтобы это исправить? Спасибо.