Displaying an image in Jade

Question

So I have the following Jade code h3(class="text-muted") MedKit that displays the word "MedKit" at the top of a web page and right next to it I want to display an image. How would I go about doing this and how should I upload/save the image I want to display?

Answer 1

You can display a image by using the img tag. In jade the syntax looks like:

img.className#IdName(src="/path-to-image.jpg" alt="Image Title")

To display it next to your h3 tag:

.image-block
  h3 Hello
  img.className#IdName(src="/path-to-image.jpg" alt="Image Title")

I suggest you read about piping in jade too. Just ensure that you replace the spaces with tabs else it will give a compilation error.

Answer 2

Pug code to display image from db is...

img.image(src='/' + img_path_var )

old jade code

img.image(src='/#{img_path_var}')