Swiper 在 React 中不显示来自本地目录的背景图片。

huangapple go评论65阅读模式
英文:

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.

&lt;section className=&quot;site-section pt-5 pb-5&quot;&gt;
&lt;div className=&quot;container&quot;&gt;
&lt;div className=&quot;row&quot;&gt;
&lt;div className=&quot;col-md-12&quot;&gt;
&lt;Swiper
spaceBetween={30}
centeredSlides={true}
autoplay={{
delay: 2500,
disableOnInteraction: false
}}
pagination={{
clickable: true
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
className=&quot;mySwiper&quot;
&gt;
&lt;SwiperSlide&gt;
&lt;a
href=&quot;blog-single.html&quot;
className=&quot;a-block d-flex align-items-center height-lg&quot;
style={{
backgroundImage: &quot;url(&#39;src/images/img_1.jpg&#39;)&quot;
}}
&gt;
&lt;div className=&quot;text half-to-full&quot;&gt;
&lt;span className=&quot;category mb-5&quot;&gt;Cybersecurity&lt;/span&gt;
&lt;div className=&quot;post-meta&quot;&gt;
&lt;span className=&quot;author mr-2&quot;&gt;
&lt;img src=&quot;src/images/person_1.jpg&quot; alt=&quot;author&quot; /&gt;
Sneid{&#39; &#39;}
&lt;/span&gt;
{&#39;. &#39;}
&lt;span className=&quot;mr-2&quot;&gt;June 20, 2022 &lt;/span&gt;
{&#39;. &#39;}
&lt;span className=&quot;ml-2&quot;&gt;
&lt;span&gt;
&lt;CommentIcon sx={{ fontSize: 14 }} /&gt;
&lt;/span&gt;
{&#39; 3&#39;}
&lt;/span&gt;
&lt;/div&gt;
&lt;h3&gt;How to protect yourself in the cyber world&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quidem nobis, ut dicta eaque ipsa laudantium!
&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/SwiperSlide&gt;
&lt;/Swiper&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

答案1

得分: 0

你应该将照片保存在public文件夹中,然后在src的位置,提供你想要从公共文件夹获取的照片的相对路径。React本身知道图片的路径在哪里。将images/person_1.jpgsrc文件夹移动到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:

&lt;img src=&quot;/images/person_1.jpg&quot; alt=&quot;author&quot; /&gt;

second way:

&lt;img src={process.env.PUBLIC_URL + &quot;/images/person_1.jpg&quot;} alt=&quot;author&quot; /&gt;

PUBLIC_URL is the public folder path of your React project.

I hope you can solve your problem with what I said.

huangapple
  • 本文由 发表于 2023年6月6日 01:39:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76408809.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定