在React中使用从另一个JavaScript文件导出的图片的问题

Question

我试图在JavaScript文件'Photos-Photos.js'中导入一些本地图片，并导出这些图片以在另一个JavaScript（React）文件中使用，以避免在我的主React文件'Photos.js中导入大量内容“

我试图将所有图像放在一个对象中，但是现在我只想导出保存有本地路径的所有变量到照片。

简而言之，这是我的Photos.js（反应）文件

import React, { Component } from 'react';
import Carousel from 'react-bootstrap/Carousel';
import * as Pics from "./Photos-Photos";

class Photos extends Component {
  render() {
    return(
      <div className="main-body-wrapper">
        <main className="body-content">

          <div className="slideshow-row-wrapper">
            <div className="slideshow-row-content">
              <div className="slideshow-title-wrapper">
                <div className="slideshow-title">
                  <h3>Sustainabilibash</h3>
                </div>
                <div className="photo-credz">
                  <p>Photos by: John Doe</p>
                </div>
              </div>
              <div className="main-slider-wrapper">
                <div className="main-slider-content">
                  <Carousel>
                    <Carousel.Item>
                      <img className="d-block w-100" src={Pics.AlChE1} alt="pic" />
                    </Carousel.Item>
                    <Carousel.Item>
                      <img className="d-block w-100" src={Pics.AlChE2} alt="pic" />
                    </Carousel.Item>
                  </Carousel>
                </div>
              </div>
            </div>
          </div>

        </main>
      </div>
    );
  }

}

这是我的“ Photos-Photos.js”文件，我在其中导出图像

export const AlChE1 = "./../images/photos/AlChE/AlChE-0.jpeg";
export const AlChE2 = "./../images/photos/AlChE/AlChE-1.jpeg";

我没有收到任何错误； 但是，不是显示图像，而是显示替代文本“ pic”。 我试图只导入“ Photos.js” React文件中的每个图像，并且效果很好，但是我不想在该文件中进行大量导入（“ Photos-Photos.js”中导出图像的数量）上面的代码仅是我需要用于此页面的图像的约1/10）

Answer 1

一件事，您可以在每个img标签上导入，就像自己的图片一样

img src = {require（'〜/ myphoto.jpg'）}

如果您手动制作轮播，然后一张一张地渲染照片，就可以实现目标