英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论