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

Question

我正在尝试在 JavaScript 文件“Photos-Photos.js”中导入一些本 map 片，并将这些图片导出以在另一个 JavaScript(React)文件中使用，以避免在我的主 React 文件中进行大量导入。照片.js'

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

简而言之，这是我的 Photos.js (React) 文件

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')}

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