英文:
Swiper not showing background image from local directory in react
问题
我尝试从名为 "images" 的项目本地存储库中添加图像，并将其用作轮播器中的背景图像，但图像未显示。它只显示了 "
" 和 "
" 的文字内容。背景图像没有显示出来。文字内容应该显示在图像之上，并随图像一起滑动。以下是我的代码。请帮助我解决背景图像的问题。
<section className="site-section pt-5 pb-5">
<div className="container">
<div className="row">
<div className="col-md-12">
<Swiper
spaceBetween={30}
centeredSlides={true}
autoplay={{
delay: 2500,
disableOnInteraction: false
}}
pagination={{
clickable: true
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
className="mySwiper"
>
<SwiperSlide>
<a
href="blog-single.html"
className="a-block d-flex align-items-center height-lg"
style={{
backgroundImage: "url('src/images/img_1.jpg')"
}}
>
<div className="text half-to-full">
<span className="category mb-5">Cybersecurity</span>
<div className="post-meta">
<span className="author mr-2">
<img src="src/images/person_1.jpg" alt="author" />
Sneid{' '}
</span>
{'. '}
<span className="mr-2">June 20, 2022 </span>
{'. '}
<span className="ml-2">
<span>
<CommentIcon sx={{ fontSize: 14 }} />
</span>
{' 3'}
</span>
</div>
<h3>How to protect yourself in the cyber world</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quidem nobis, ut dicta eaque ipsa laudantium!
</p>
</div>
</a>
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</section>
希望这可以帮助您解决背景图像的问题。
英文:
I tried adding image from the project local repo called "images" and use it as background image in the swiper carousel, but the image is not displaying. It's showing only the <h3> and <p> write-up. The background image is not showing. The write up suppose to be on top of the image and slide along with the image. Here is my code. Please I need help in resolving the background image issue.
<section className="site-section pt-5 pb-5">
<div className="container">
<div className="row">
<div className="col-md-12">
<Swiper
spaceBetween={30}
centeredSlides={true}
autoplay={{
delay: 2500,
disableOnInteraction: false
}}
pagination={{
clickable: true
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
className="mySwiper"
>
<SwiperSlide>
<a
href="blog-single.html"
className="a-block d-flex align-items-center height-lg"
style={{
backgroundImage: "url('src/images/img_1.jpg')"
}}
>
<div className="text half-to-full">
<span className="category mb-5">Cybersecurity</span>
<div className="post-meta">
<span className="author mr-2">
<img src="src/images/person_1.jpg" alt="author" />
Sneid{' '}
</span>
{'. '}
<span className="mr-2">June 20, 2022 </span>
{'. '}
<span className="ml-2">
<span>
<CommentIcon sx={{ fontSize: 14 }} />
</span>
{' 3'}
</span>
</div>
<h3>How to protect yourself in the cyber world</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quidem nobis, ut dicta eaque ipsa laudantium!
</p>
</div>
</a>
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</section>
答案1
得分: 0
你应该将照片保存在public文件夹中，然后在src的位置，提供你想要从公共文件夹获取的照片的相对路径。React本身知道图片的路径在哪里。将images/person_1.jpg从src文件夹移动到public文件夹，并在src属性中使用images/person_1.jpg代替src/images/person_1.jpg。
第一种方式：
<img src="/images/person_1.jpg" alt="author" />
第二种方式：
<img src={process.env.PUBLIC_URL + "/images/person_1.jpg"} alt="author" />
PUBLIC_URL是你的React项目的public文件夹路径。
希望你可以用我说的方法解决你的问题。
英文:
You should save the photos in the public folder and then instead of src, you should give the relative path of the photo you want from the public folder. React itself understands where the image path is. Move images/person_1.jpg from src folder to public folder and put images/person_1.jpg instead of src/images/person_1.jpg in src attribute.
first way:
<img src="/images/person_1.jpg" alt="author" />
second way:
<img src={process.env.PUBLIC_URL + "/images/person_1.jpg"} alt="author" />
PUBLIC_URL is the public folder path of your React project.
I hope you can solve your problem with what I said.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论