<!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" >