Rendering local image file on HTML

<!doctype html>

<head>
    <title> Page Title </title>
    <!--Meta Tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <style type="text/css">
        * {
            margin: 0;
            border: 0;
            padding: 0;
        }

        body {
            background-color: black;
            background-image: url("frame.png");
            background-repeat: no-repeat;
            background-position: center top;

        }

        img {
            max-width: 100%;
        }

        #logo,
        #logo-text {
            text-align: center;
            margin: 2%;
        }

        #logo-text {
            color: Red;
            font-family: Arial;
        }
    </style>
</head>

<body>

    <div id="wrapper">
        <header>

            <div id="logo">
                <img src="C:/title.jpg" alt="">
            </div>

            <div id="logo-text">
                <h1>Hey {{name}}</h1>
            </div>

            <div id="logo">
                <img src="dog.jpg">
            </div>
        </header>

        <footer>

        </footer>
    </div>
    <!-- Optional JavaScript -->
</body>

</html>

My image location: C:/dog.jpg I've tried:

C:/dog.jpg C://dog.jpg C:\dog.jpg C:\dog.jpg C:dog.jpg file://c:dog.jpg

None of them seems to work, on mail broken img link is something like:

https://ci6.googleusercontent.com/proxy/izYZCJXx-jXLHBVR1eDxUnpAW7vOzihRRVcZEfKoBzVP=s0-d-e1-ft#http://dog.jpg

How can i send images on email from my local files?

awdeorio / mailmerge

Rendering local image file on HTML #41