Search code examples
htmlimagestoragelocal

Insert a Locally stored .svg into html

I'm trying to put a logo on my home screen using html. This logo is a locally stored .svg file. I'm new to coding.

I input this code:

!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Solo Scriptura Homepage</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="Homepage.css">
    </head>
    <body>
      <header>
        <img src="logo v2.svg" alt="My Logo"/>
      </header>
      <main></main>
    </body>
</html>

Resultingly, my alt text shows up as well as the little icon that means they can't load your image.

Solution

  • The reason is because your code does not define the path to the image file. For the browser to find the image, you need to define the right path for the image (the logo) to be recognized.

    Say for instance your image(logo) is stored in a folder called images. Your code should look like this:

    <img src="images/logo v2.svg" alt="My Logo"/>

    And if the image (the logo) file is not saved in a folder. Save it in a folder and call the image path like the example above.