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

Question

我正在为我的 react 应用程序构建一个图像模块，我在 internet 上找到了它，它工作得很好，但我不知道如何链接本地图像而不是来自 google(url) 或 wiki(url)但从我本地的 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 属性。