这是否仅适用于外部 URL 而不是本地 URL？答案

【问题标题】：Is this only possible with external URLs and not local?这是否仅适用于外部 URL 而不是本地 URL？
【发布时间】：2019-11-21 18:02:03
【问题描述】：

我正在尝试使用 react-images 制作照片库，网址正确，但照片本身并未加载到我的网络应用程序中。将modalIsOpen:false 切换为 true 时出现损坏的图像图标。

我尝试查找相同问题和替代方案的示例，例如组件是否配置正确，或者我是否在课堂上对其进行了扩展。

import React, { Component } from 'react';
import Carousel, { Modal, ModalGateway } from 'react-images';

import blksmith from '../images/gallery/illustration/Blacksmith.jpg';
import mage from '../images/gallery/illustration/Mage.jpg';
const images =
[
    {
        src:{blksmith}

    } ,
    {
        src:{mage}
    }

];
class illuGallery extends Component {
    state = { modalIsOpen: false }
    toggleModal = () => {
      this.setState(state => ({ modalIsOpen: !state.modalIsOpen }));
    }
    render() {
      const { modalIsOpen } = this.state;

      return (
        <ModalGateway>
          {modalIsOpen ? (
            <Modal onClose={this.toggleModal}>
              <Carousel 

                views={images} 
              />
            </Modal>
          ) : null}
        </ModalGateway>
      );
    }
  }
export default illuGallery;

这是在实际的 gallery.js 文件中，即呈现画廊的网页。

import React from 'react';
import Layout from "../components/layout";
import IlluPhotos from "../components/illustrationGallery";
import SEO from "../components/seo";
import './gallery.scss';


const GalleryPage = () => {
    return (
        <Layout>
            <div style={{width:'100%',height:'250px'}}>
                <SEO title="Gallery" />
                <IlluPhotos/>


            </div>
        </Layout>
    )
}
export default GalleryPage;

我正在寻求一些关于如何让它发挥作用的反馈，我做错了什么，或者我应该进一步探索什么。

【问题讨论】：

嗨布拉德，当您在浏览器中检查损坏的图像时，那里显示的 src 是什么？
嗨，Derek，上面写着https://localhost:8000/src/images/gallery/illustration/Blacksmith.jpg，当我检查另一个时也会发生同样的情况，除了 Mage.jpg

标签： reactjs image gallery gatsby react-image

【解决方案1】：

所以我最终将我想要的画廊图片添加到公用文件夹中，如post 中进一步提到的那样

因为https://localhost:8000 出现在我想使用的图像的链接前面。

谢谢大家帮我找到答案！！

【讨论】：

【解决方案2】：

您无需导入图片。
根据react-images documentation，您只需要将图像的路径作为字符串传递给<Carousel> 组件，如下例所示：

import React from 'react';
import Carousel from 'react-images';

const images = [{ src: 'path/to/image-1.jpg' }, { src: 'path/to/image-2.jpg' }];

class Component extends React.Component {
  render() {
    return <Carousel views={images} />;
  }
}

【讨论】：

我试过了，但它不起作用。但我找到了答案！谢谢你虽然baitun！