Strange behaviour of importing images via html tags

[botkero]

Hello,

I'm experiencing a strange bug/behavior of importing images to the page.
When using Markdown, then everything works right. But when using HTML tags, then I have to escape one more time. I'm not certain why this happening, and I thought I ask the folks here.

Weird behavior

This is my folder structure at the moment. Something to notice it, that this behavior not always happens. For example, in 2.md I do not have this issue at all.

- docs
   - img
   - folder
     - 1.md
     - 2.md

Here is the content of my 1.md file which has this problem.

# Image Test

![test](../img/male.png)

<section class="card">
  <div class="card--content">
    <img class="image" src="../../img/male.png">  <!-- works -->
  </div>
  <div class="card--content">
    <img class="image"  src="../img/female.jpg">  <!-- does not work -->
  </div>
</section>

And this is my CSS style. I don't think it has anything to do with CSS.

.card {
    display: flex;
    background-color: #fff;
    border-radius: 5px;
    min-width: 100%;
    min-height: 200px;
    overflow-x: auto;
  }

.card--content {
/* background-color: #e74c3c; */
min-width: 200px;
margin: 5px;
}

.image {
    display: flex;
    justify-content: center;
    align-items: center;
}

[squidfunk]

Likely related to use_directory_urls. When you use img tags, MkDocs doesn't adjust for the additional trailing slash.