gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:30:02 25 4
gpt4 key购买 nike

我正在尝试在 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)

最佳答案

你可以在每个 img 标签上做一件事,导入它自己的图片

img src={require('~/myphoto.jpg')}

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

关于javascript - 在 React 中使用从另一个 JavaScript 文件导出的图片时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56553535/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com