Meteor-CollectionFS无法在react组件中显示图像缩略图

时间:2018-12-02 07:01:06

标签: javascript reactjs meteor thumbnails react-component

我已经使用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.Component渲染中显示图像代码

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>
        );
    }
}

0 个答案:

没有答案