How to Print a Picture in a Sublime Text File ?

The Sublime Text is a versatile and powerful text editor renowned for its simplicity, speed, and extensive customization options. While it’s primarily used for editing code it also supports various file formats including text files with the embedded images. However, Sublime Text itself doesn’t have native support for displaying images within the editor. Instead, we can embed images using the HTML markup.

Approach

  • To print a picture in the Sublime Text file we first need to insert the image into the file. Sublime Text does not have native support for displaying images within the editor itself but you can embed images using HTML.
  • Before embedding the image make sure it is saved in the location accessible to your Sublime Text project. You can save the image in the same directory as your Sublime Text file or in the subdirectory.
  • Open your Sublime Text file and use the HTML <img> tag to embed the image. The <img> tag requires the src attribute which should contain the path to the image file relative to the location of your Sublime Text file. For example:
<img src="image.jpg" alt="Description of the Image">
  • Replace “image.jpg” with actual filename of your image and “Description of the Image” with the brief description of the image.
  • Once you have inserted the <img> tag with the appropriate src attribute and save the Sublime Text file.
  • While you won’t see the image directly within the Sublime Text editor we can view it in the other applications capable of the rendering HTML content such as web browsers.

Example: The provided example demonstrates embedding an image in the Sublime Text file using the HTML. It includes an <img> tag with src attribute pointing to the online image and an alt attribute for the describing the image.

HTML
<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Image</title>
</head>
  
<body>
    <img src=
"https://media.w3wiki.net/wp-content/uploads/20240412124006/gfg12.jpg"
         alt="Example Image">
    <p>
          This is an example of embedding an 
          image in a Sublime Text file using HTML.
      </p>
</body>
  
</html>

Output: