Display image

Let's display the image in the article. With easy-to-understand illustrations, the quality of the article will be greatly improved.

Let's try Linux Penguins as an example of the image.

The above is the example displayed.

Place the image

First, you need to place the image.

Assuming that the name of the prepared image is "linux-penguin.png", let's place the image in the following directory.

templates / static / images

Place your images in this directory.

Display image

After arranging the images, let's display the images.

Add the following line to your article.

<img src = "/images/linux-penguin.png">

The image is displayed.

The img tag is an HTML function for displaying images. Specify the image path in the attribute called src.

FAQ

I want to specify the size of the image

If you want to specify the size of the image, use a stylesheet and write:

<img src = "/images/linux-penguin.png" style = "width: 400px">

I want to support the image size on both smartphones and PCs

If you want to support the size of the image on both smartphones and PCs, write as follows.

For smartphones, it is displayed at 98%of the horizontal screen, and for PCs, it is displayed at 400px.

<img src = "/images/linux-penguin.png" style = "width: 98%; max-width: 400px;">

I want to surround the image with a border

If you want to surround the image with a border, write as follows.

<img src = "/images/linux-penguin.png" style = "border: 1px solid #ddd">

Surrounded by a 1px light gray border.

Is it okay to place images in subdirectories?

Yes.

templates / static /images/foo / bar.png

It's okay to have a subdirectory like this.

The image is specified

<img src = "/images/foo / bar.png">

Will be.