Home > Net >  Images are not getting displayed on my website (HTML)
Images are not getting displayed on my website (HTML)

Time:02-16

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>AYNTK</title>

  </head>
  <body>
    <div id="carouselExampleControls"  data-bs-ride="carousel">
      <div >
        <div >
          <img src="templates\Slide 1.jpg" >
        </div>
        <div >
          <img src="templates\Slide 2.jpg" >
        </div>
        <div >
          <img src="templates\Slide 3.jpg" >
        </div>
      </div>
      <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span  aria-hidden="true"></span>
        <span >Previous</span>
      </button>
      <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span  aria-hidden="true"></span>
        <span >Next</span>
      </button>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

 </body>
</html>

I am really new to designing with HTML and CSS... I took this code from Bootstrap website, trying to create a carousel and added the relative path of my images to the img tag as source. The images does not get displayed on the website.. What can possibly be the reason?

CodePudding user response:

host your images on Google drive as in upload them on Google drive , make them available for anyone within Google drive then copy the link for each image , place the link wherever you want that image in your code with in image tags and it's done bro. Your images will be loaded. Are you hosting it some where or your running it locally in your browser bro

CodePudding user response:

Change \ to / in src attribute of img tag as

<img src="templates/Slide 1.jpg" >
  • Related