embed a picture from a link js

Embedding a Picture from a Link Using JavaScript

Adding images to your website can make it more visually appealing and engaging. You can embed pictures by linking to them in your HTML code. In this article, we will discuss how to embed a picture from a link using JavaScript.

Method 1: Using the Image Object

The easiest way to embed a picture from a link using JavaScript is by utilizing the Image object. This method involves creating an Image object and assigning the source of the image to the link.

<div id="image-container"></div>

<script>
  const img = new Image();
  img.src = "https://example.com/image.jpg";
  document.getElementById("image-container").appendChild(img);
</script>

In the above code, we first create a div with an ID of "image-container". We then create a new Image object and assign its source to the URL of our image. Finally, we append the image to the div using the appendChild() method.

Method 2: Using the HTML <img> Tag

An alternative method for embedding images using JavaScript is by using the HTML <img> tag. This method involves creating an <img> element and setting its source attribute to the link.

<div id="image-container"></div>

<script>
  const img = document.createElement("img");
  img.src = "https://example.com/image.jpg";
  document.getElementById("image-container").appendChild(img);
</script>

In the above code, we first create a div with an ID of "image-container". We then create a new <img> element and set its source attribute to the URL of our image. Finally, we append the image to the div using the appendChild() method.

Method 3: Using jQuery

If you are using jQuery on your website, you can use the append() method to insert an image into an HTML element.

<div id="image-container"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $("#image-container").append("<img src='https://example.com/image.jpg'>");
</script>

In the above code, we first create a div with an ID of "image-container". We then include the jQuery library and use the append() method to insert an <img> element with the source attribute set to the URL of our image.

Syntax Highlighting with Highlight.js

If you want to display your code with syntax highlighting, you can use a third-party library like Highlight.js. This library supports over 180 programming languages and can be easily integrated into your website.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>

<pre>
  <code class="html">
    <div id="image-container"></div>

    <script>
      const img = new Image();
      img.src = "https://example.com/image.jpg";
      document.getElementById("image-container").appendChild(img);
    </script>
  </code>
</pre>

<script>
  hljs.highlightAll();
</script>

In the above code, we first include the default CSS stylesheet and the Highlight.js library. We then wrap our code in a <pre> and <code> element and add the HTML syntax highlighting class to the <code> element. Finally, we call the highlightAll() method to apply syntax highlighting to our code.

In conclusion, there are multiple ways to embed a picture from a link using JavaScript. You can use the Image object, the HTML <img> tag, or jQuery to insert the image into your HTML code. Additionally, you can use Highlight.js to display your code with syntax highlighting.