Reactjs-如何用Reactjs图片库显示导入的图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (260)

我一直在玩eact-photo-gallery。

已经安装了它与lightbox,当我显示在线照片,工作正常。

当我试图导入,它不是显示照片,而是它的框架。

import React from 'react';
import Gallery from 'react-photo-gallery';
import Lightbox from 'react-images';

import thumbsup from "../../assets/images/thumbsup.png";


const photos = [
  { src: {thumbsup}, width: 4, height: 3 },
  { src: 'https://source.unsplash.com/Dm-qxdynoEc/800x799', width: 1, height: 1 },
  { src: 'https://source.unsplash.com/qDkso9nvCg0/600x799', width: 3, height: 4 }
];


export default class Sample extends React.Component {
  constructor() {
    super();
    this.state = { currentImage: 0 };
    this.closeLightbox = this.closeLightbox.bind(this);
    this.openLightbox = this.openLightbox.bind(this);
    this.gotoNext = this.gotoNext.bind(this);
    this.gotoPrevious = this.gotoPrevious.bind(this);
  }
  openLightbox(event, obj) {
    this.setState({
      currentImage: obj.index,
      lightboxIsOpen: true,
    });
  }
  closeLightbox() {
    this.setState({
      currentImage: 0,
      lightboxIsOpen: false,
    });
  }
  gotoPrevious() {
    this.setState({
      currentImage: this.state.currentImage - 1,
    });
  }
  gotoNext() {
    this.setState({
      currentImage: this.state.currentImage + 1,
    });
  }
  render() {
    return (
      <div>
        <Gallery photos={photos} onClick={this.openLightbox} />
        <Lightbox images={photos}
          onClose={this.closeLightbox}
          onClickPrev={this.gotoPrevious}
          onClickNext={this.gotoNext}
          currentImage={this.state.currentImage}
          isOpen={this.state.lightboxIsOpen}
        />
      </div>
    )
  }
}

我正在尝试显示它,就像我在其他组件中所做的那样。

import thumbsup from "../../assets/images/thumbsup.png";
{ src: {thumbsup}, width: 4, height: 3 }
提问于
用户回答回答于

移除{umbsub}周围的花括号将修复问题。

const photos = [
  { src: thumbsup, width: 4, height: 3 },
  { src: 'https://source.unsplash.com/Dm-qxdynoEc/800x799', width: 1, height: 1 },
  { src: 'https://source.unsplash.com/qDkso9nvCg0/600x799', width: 3, height: 4 }
];

就像你现在看到的,照片对象看起来是这样的:

{
  src: {
    thumbsup: "/..../....png"
  }, 
  width: 4, 
  height: 3 
}

扫码关注云+社区

领取腾讯云代金券