False positive: Add both a 'width' and 'height' attribute to this image

Rules and Languages Report False-positive / False-negative...
, ,
1

Versions:

  • SonarQube: 8.9.1 (build 44547)
  • SonarScanner: 4.6.1.2450

Description:

A HTML user-experience rule was created, indicating that the image does not have height or width attributes even though I have them defined in a search_img CSS class rule.

I believe this is false-positive.

Minimal code:

<html>
<!-- header content... -->
<body>
    <style>
        /* This is the CSS rule for the image */
        .search_img {
            height: 100%;
            width: 1.5%;
        }
    </style>
    <div>
        <div style="padding-left: 5em; padding-bottom:2em;">
            {% load static %}
            <!-- The next line is where the issue pops up. -->
            <img class="search_img" alt="Search" src="{% static "admin/search.svg" %}" />
            <p style="color: rgb(51, 51, 102); display:inline; background-color: inherit;font-size: 2em;font-weight: bold;padding-left: 0.5em;">Customer Search</p>
        </div>
    </div>
<!-- other content... -->
</body>
</html>
2

Hello @robertp, welcome to our community.

I would say this is still a TP: the main advantage of setting the width and height on the <img> tag, is that it allows the browser the reserve the space for the image before it gets downloaded. This prevents the page layout jumping around after the image download completed. Even if the page CSS overrides these attributes, it’s still a good idea to add them, so the browser can reserve the space with respect to the correct aspect ratio [1, 2].

Cheers,

Gyula

3

Hi @Gyula_Sallai, thank you for the welcome!

And thanks for the clarification and sources. I guess I learned something new today. I will bookmark the sources so I have something to refer back to in the future.

Thank you! :slight_smile:

Robert

4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.