时间戳

首页 > 解决方案 > 为什么我的图片没有显示在我的轮播中？

javascript - 为什么我的图片没有显示在我的轮播中？

问题描述

所以这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

</head>
<body>
    
 
   <main class="container">
    

 
    
  
   

      
    

    




<link rel="stylesheet" href="/css/starRating.css">
<div class="row">

  <div class="col-6 ">

    <!-- this is the carousel part of the code -->
        
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        

        <div class="carousel-item ">
          <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800172/yelpcamp/pvor5gkvw0myrneq0rot.png "  alt="yelpcamp/pvor5gkvw0myrneq0rot ">
        </div>
      
      

        <div class="carousel-item ">
          <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800173/yelpcamp/ykqrdngzexb7nqn5dbg1.jpg "  alt="yelpcamp/ykqrdngzexb7nqn5dbg1 ">
        </div>
      
      

        <div class="carousel-item ">
          <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800173/yelpcamp/lr4ng21ocdqtyq2vqfxt.jpg "  alt="yelpcamp/lr4ng21ocdqtyq2vqfxt ">
        </div>
      
      
    </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
 <!-- this is the carousel part of the code -->
    
                
</div>



    
</main>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <script src="/js/formvalidation.js"></script>
</body>
</html>

我得到了我所期望的一切，除了图像，当我包含它的代码时，我可以获得一个响应式导航栏，我有正确的图像 url，如果我点击它会转到图像，但不知道为什么它不是显示，我按照引导轮播页面中提到的那样做了，引导链接和文档都是相同的版本

标签： javascripthtmlcss

解决方案

您需要先提供active课程carousel-item。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<main class="container">
  <link rel="stylesheet" href="/css/starRating.css">
  <div class="row">
    <div class="col-6 ">
      <!-- this is the carousel part of the code -->
      <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800172/yelpcamp/pvor5gkvw0myrneq0rot.png " alt="yelpcamp/pvor5gkvw0myrneq0rot ">
          </div>
          <div class="carousel-item ">
            <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800173/yelpcamp/ykqrdngzexb7nqn5dbg1.jpg " alt="yelpcamp/ykqrdngzexb7nqn5dbg1 ">
          </div>
          <div class="carousel-item ">
            <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800173/yelpcamp/lr4ng21ocdqtyq2vqfxt.jpg " alt="yelpcamp/lr4ng21ocdqtyq2vqfxt ">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      </div>
      <!-- this is the carousel part of the code -->
    </div>
</main>

推荐阅读