NavbarLogo doesn't have width and height attribute

[sohamsshah]

🐛 Bug Report

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io
• I have read the console error message carefully (if applicable)

Description

The img tag in the NavbarLogo attribute in docusaurus.config.js file to add Logo to Navbar doesn't have any option/prop to set the height and width of the logo. Because of this, the Lighthouse Report fails and suggests to add width and height to the logo image.

Have you read the Contributing Guidelines on issues?

Yes, I have Read it.

Steps to reproduce

1. Run Lighthouse test on any docusaurus powered website
2. See the diagnostics message that suggests to add width and height attribute
3. Also in inspect element, width and height attributes are missing.

Expected behavior

There should be props for this in order to add height and width to image along with defaults.

Screen Shot

Your environment

• Docusaurus version used: latest
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Chrome 87
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

I am new to the community and willing to contribute towards this issue. Please let me know more insights upon this. Would like to take this up!

[Josh-Cena]

As a further request: can we make all images within a Markdown file have the height (and width, maybe) attribute as well? Is it possible to fetch this data when we convert them to require calls?

This ensures that there's no layout shift as the images load.

[slorber]

Yes, agree that we should definitively do that!

[sohamsshah]

Yes, agree that we should definitively do that!

Hi, Can you provide some implementation insights for me to get started?

[slorber]

Unfortunately not much, it's not something we have ever done yet in Docusaurus.

Maybe we can look into converting this:

module.exports = {
  themeConfig: {
    navbar: {
      title: 'Site Title',
      logo: {
        src: 'img/logo.png',
        srcDark: 'img/logo_dark.png',
      },
    },
  },
};

Into this?

module.exports = {
  themeConfig: {
    navbar: {
      title: 'Site Title',
      logo: {
        src: {src: 'img/logo.png', width: 50, height: 50},
        srcDark: {src: 'img/logo.png', width: 50, height: 50},
      },
    },
  },
};

Not sure where this conversion should lead exactly, how expensive it is, and also we must consider that some people provide an absolute URL, or a SVG...

Temporarily, we could allow providing width/height explicitly?

module.exports = {
  themeConfig: {
    navbar: {
      title: 'Site Title',
      logo: {
        src: 'img/logo.png',
        width: 50,
        height: 50,
        className: "my-custom-logo"
      },
    },
  },
};