Question

我正在为我的react应用构建图像模块，并且我在internet上找到了它，效果很好，但是我不知道如何从google（url）或wiki（网址），但在我的本地img文件夹中，谢谢您的帮助

import Lightbox from 'react-lightbox-component';
const App = () => (


<div>
    <Lightbox images={
      [
        {
          src: 'some image url',
          title: 'image title',
          description: 'image description'
        }
      ]
    }/>
  </div>
);

Answer 1

import ImageSrc from "../path/to/your/image";


<Lightbox images={
  [
    {
      src: {ImageSrc},
      title: 'image title',
      description: 'image description'
    }
  ]
}/>

您需要正确地从当前文件夹导航

../-返回文件夹 /-转发文件夹

构建引用图像位置的路径。

这是我的子页面：

import React, { Component } from 'react';
import{
  Link
} from 'react-router-dom';
import Lightbox from 'react-lightbox-component';

//import img
import img1 from'../../assets/img/vizualizacie/vizualizacie1.jpeg';
import img2 from'../../assets/img/vizualizacie/vizualizacie2.jpeg';
import img3 from'../../assets/img/vizualizacie/vizualizacie3.jpeg';
import img4 from'../../assets/img/vizualizacie/vizualizacie4.jpeg';



class Vizualizacie extends Component{




  render() {



    return (

    <div className="Vizualizacie" >

      <div className="sekcia1">

        <h1>Vizualizácie</h1>

      </div>

      <div className="sekcia2">

        <h2>Naša Tvorba</h2>
        <p>
          Neque porro quisquam est qui dolorem ipsum quia lorem ipsum dolor sit amet dolor sit amet, consectetur, adipisci velit
        </p>

      </div>

        <Lightbox className="sekcia3" images={ [
          {
            src: {img1},
            title: 'Ropy pahoehoe',
            description: 'By Tari Noelani Mattox. Licensed under Public Domain via Commons'
          },
          {
            src: 'https://upload.wikimedia.org/wikipedia/commons/7/73/Pyroclastic_flows_at_Mayon_Volcano.jpg',
            title: 'Pyroclastic flows at Mayon Volcano',
            description: 'By C.G. Newhall. Licensed under Public Domain via Commons'
          },
          {
            src: 'https://upload.wikimedia.org/wikipedia/commons/f/f3/Okataina.jpg',
            title: 'Okataina',
            description: 'By Richard Waitt. Licensed under Public Domain via Commons'
          },
          {
            src: 'https://upload.wikimedia.org/wikipedia/commons/f/f3/Okataina.jpg',
            title: 'Okataina',
            description: 'By Richard Waitt. Licensed under Public Domain via Commons'
          }
        ] }/>




    </div>






    );
  }
}

export default Vizualizacie;

这是我的lightbox.jsx组件：

import React from 'react';
import PropTypes from 'prop-types';
import Container from './Container';
import BodyPortal from './BodyPortal';
import './Lightbox.css'

import img1 from'./../../../assets/img/vizualizacie/vizualizacie1.jpeg';

export default class Lightbox extends React.Component {
  constructor(props) {
    super(props);
    this.toggleLightbox = this.toggleLightbox.bind(this);
    this.state = {
      showLightbox: false,
      selectedImage: 0
    };
  }

  toggleLightbox(idx) {
    this.setState({
      showLightbox: !this.state.showLightbox,
      selectedImage: idx
    });
  }

  render() {
    let props = this.props;
    let images = props.images.map((image, idx) => {
      return props.renderImageFunc.call(
        this,
        idx,
        image,
        this.toggleLightbox,
        props.thumbnailWidth,
        props.thumbnailHeight
      );
    });
    let container;
    if (this.state.showLightbox)
      container = (
        <BodyPortal>
          <Container
            {...this.props}
            toggleLightbox={this.toggleLightbox}
            selectedImage={this.state.selectedImage}
          />
        </BodyPortal>
      )

    return (
      <div className='lightbox-container'>
        {images}
        {container}
      </div>
    )
  }
}

Lightbox.defaultProps = {
  showImageModifiers: true,
  thumbnailWidth: '80px',
  thumbnailHeight: '80px',
  renderImageFunc: (idx, image, toggleLightbox, width, height) => {
    return (
      <img
        key={idx}
        src={ !!image.thumbnail ? image.thumbnail : image.src  }
        className='lightbox-img-thumbnail'
        style={{width: width, height: height}}
        alt={image.title}
        onClick={toggleLightbox.bind(null, idx)} />
    )
  }
}

Lightbox.propTypes = {
  images: PropTypes.arrayOf(PropTypes.shape({
    src: PropTypes.string.isRequired,
    title: PropTypes.string,
    description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    thumbnail: PropTypes.string
  })).isRequired,
  showImageModifiers: PropTypes.bool,
  thumbnailWidth: PropTypes.string,
  thumbnailHeight: PropTypes.string,
  renderImageFunc: PropTypes.func,
  renderDescriptionFunc: PropTypes.func
}

Answer 2

您可以通过以一个正斜杠开头将图像URL指定为“相对于域”（即从当前网站）。例如

/my_images/image.png

只需传入该格式的字符串作为src属性即可。

如何在js中将本地图像链接到字符串

2 个答案: