Meteor-CollectionFS не может отображать миниатюру изображения в реагирующем компоненте - PullRequest
Новая
       17

Meteor-CollectionFS не может отображать миниатюру изображения в реагирующем компоненте

0 голосов
/ 02 декабря 2018

Я использовал CollectionFS для изображения и эскиза изображения.Я могу хранить миниатюры изображений в .meteor\local\cfs\files\thumbs, но проблема в том, что я не могу показать миниатюру изображения.Если я удалил функцию сохранения оригинального изображения new FS.Store.FileSystem("images"), миниатюра отображается нормально.Мне нужно как оригинальное, так и уменьшенное изображение.Теперь мой код показывает исходное изображение.Как показать эскиз и исходные изображения? 

ProjectImages = new FS.Collection('ProjectImages', {
   stores:[
      new FS.Store.FileSystem("images"),
      new FS.Store.FileSystem("thumbs", {
        transformWrite: function(fileObj, readStream, writeStream) {
          gm(readStream, fileObj.name()).resize(400,350,"^>").gravity("Center").extent(400,350).quality(100).stream().pipe(writeStream);

        }
      })

   ],
   filter: {
      allow: {
         contentTypes: ['image/*'],
         extensions: ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG']
      }
   }
});

Отображение кода изображения в React.Romponent render 

export default class ListEvents extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            events: []
        };
    }
    componentDidMount(){
        this.eventsTracker = Tracker.autorun(() => {
            Meteor.subscribe('events');
            const events = Events.find(
                {status: false},
                { sort: { createdAt: -1 }}
            ).fetch();
            this.setState({ events });
        });
    }
    componentWillUnmount(){
        this.eventsTracker.stop();
    }

    renderEvents(){
        return this.state.events.length ? this.state.events.map((event, i) => (
            <div  key={event._id}>
                <img src={event.projectImage} store='thumbs' alt="Brand" />
            </div>
        )) : OOOPSY: NO EVENTS REGISTERED

    }
    render(){
        return(
            <div className="row">
                {this.renderEvents()}
            </div>
        );
    }
}
...