Почему мое изображение не отображается для предварительного просмотра? - PullRequest
Новая
       7

Почему мое изображение не отображается для предварительного просмотра?

0 голосов
/ 03 мая 2020

Я пытаюсь сделать простое приложение, которое позволяет пользователю загружать изображения и хранить их в Cloudinary. Когда пользователь нажимает «Загрузить», он должен отображать изображения для предварительного просмотра. Но по какой-то причине мои изображения просто не отображались. С другой стороны, я смог опубликовать sh и увидеть изображения в облачном хранилище.

Я неправильно понял URL-адрес изображения?

Компонент приложения 

import React, { Component } from 'react'
import Images from './components/Images'
import UploadButton from './components/UploadButton'
import { API_URL } from './config'
import './App.css'

export default class App extends Component {
  state = {
    uploading: false,
    images: [],
  }
  onChange = e => {
  const files = Array.from(e.target.files) 

  this.setState({
     images: [...this.state.images, files]
  }, () => {
      console.log('images in the array', this.state.images);
  });
  }

  publish = () => {
    let self = this
   setTimeout(
      function() {
        const formData = new FormData()
   self.state.images.forEach((file, i) => {
      formData.append(i, file)

    })

    fetch(`${API_URL}/image-upload`, {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(() => {
      alert('Posted image successfully')
    })},
      1000
  );

  }

  removeImage = id => {
    this.setState({
      images: this.state.images.filter(image => image.public_id !== id)
    })
  }

  render() {
    const { uploading, images } = this.state

    const content = () => {

      switch(true) {
        case uploading:
          return<div>Loading</div>
        case images.length > 0:
          return <Images images={images} removeImage={this.removeImage} />
        default:
          return <UploadButton onChange={this.onChange} />
      }
    }

    return (
      <div>
        <div className='buttons'>
          {content()}
          <button onClick={()=> this.publish()}>Publish</button>
        </div>
      </div>
    )
  }
}

Компоненты изображений: 

export default props => 
  props.images.map((image, i) =>
    <div key={i} className='fadein'>
      <div 
        onClick={() => props.removeImage(image.public_id)} 
        className='delete'
      >
        <FontAwesomeIcon icon={faTimesCircle} size='2x' />
      </div>

      <img src={image.secure_url} alt='' />
    </div>
  )

Компонент UploadButton 

export default props => 
  <div className='buttons fadein'>
    <div className='button'>
      <label htmlFor='single'>
        <FontAwesomeIcon icon={faImage} color='#3B5998' size='10x' />
      </label>
      <input type='file' id='single' onChange={props.onChange} /> 
    </div>

    <div className='button'>
      <label htmlFor='multi'>
        <FontAwesomeIcon icon={faImages} color='#6d84b4' size='10x' />

      </label>
      <input type='file' id='multi' onChange={props.onChange} multiple />
    </div>
  </div>
...