#77 How to insert image without using img tag in HTML?

You can display images without using the <img> tag by leveraging CSS, background images, or even SVG.

---

✅ 1. Using CSS background-image

<div class="image-box"></div>

<style>
.image-box {
  width: 300px;
  height: 200px;
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
}
</style>

---

✅ 2. Using <div> and Inline CSS

<div style="width:300px; height:200px; background:url('your-image.jpg') no-repeat center/cover;"></div>

---

✅ 3. Using <canvas> and JavaScript

<canvas id="myCanvas" width="300" height="200"></canvas>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  const img = new Image();
  img.onload = () => ctx.drawImage(img, 0, 0, 300, 200);
  img.src = "your-image.jpg";
</script>

---

✅ 4. Using <object> Tag

<object data="your-image.jpg" type="image/jpeg" width="300" height="200"></object>

---

✅ 5. Using Inline SVG (if it's an SVG image)

<svg width="100" height="100">
  <image href="your-image.svg" width="100" height="100" />
</svg>

---

📝 Summary:

While <img> is standard, CSS background, canvas, object, or SVG offer creative and flexible alternatives to render images without using <img> tags.