Display image from database in nav bar in ASP.Net

Hi vereato,

Please refer below Sample.

HTML

<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrapper">
    <div class="top">
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="header" style="font-family: Nunito;">
            <a class="navbar-brand" href="Default.aspx" style="font-family: 'Renogare Soft', sans-serif; font-weight: 500; font-size: 16pt;">
                <i class="fas fa-bowling-ball" aria-hidden="true" style="margin: 0 7px; font-size: 20pt; color: #44a6e8;"></i>Cosmic</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border-color: none; font-size: 10pt; border-width: 0px; color: #fff;">
                <span class="navbar-toggler-icon" style="font-size: 10pt; color: #fff;"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link active" href="Default.aspx" style="font-weight: bolder;">
                            <i class="fa fa-home" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>home<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="About.aspx" style="font-weight: bolder;">
                            <i class="fas fa-address-card" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>about Us
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="Contact.aspx" style="font-weight: bolder;">
                            <i class="fas fa-address-book" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="LoginForm.aspx" style="font-weight: bolder;">
                            <i class="fas fa-sign-in" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>login
                        </a>
                    </li>
                    <li class="nav-item">
                        <asp:Button ID="newclients" runat="server" CssClass="btn" Font-Bold="true" Font-Size="10pt" Text="Create free account" />
                    </li>
                </ul>
            </div>
        </nav>
        <div id="dvMobile" class="visible-lg hidden-xl d-block d-lg-none"></div>
        <div>
            <img id="dots" alt="dotted" src="images/curly.jpg" />
            <div class="line" style="color: #fff;">
            </div>
            <div class="row" id="frontpage" style="width: 98%; margin: 0 auto; padding: 35px; top: 1%;">
                <div class="col-sm-7" style="margin: 0 auto; padding: 5px;">
                    <br />
                    <div class="container" style="margin-top: 4%; padding: 0px; top: 8%;">
                        <label id="boldhead" style="font-family: Roboto; font-size: 7.0vmin; color: #002335; top: 6%; font-weight: 900;">Best Prices for your Kids</label>
                        <br />
                        <p id="secondhead" style="font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 13pt; color: #05214d;">
                            Start yourshopping for your kids anywhere and anytime!
                        </p>
                        <br />
                        <asp:Button ID="btnstart" runat="server" class="btn btn-lg btn-primary" PostBackUrl="~/SignUp.aspx" Text="Create an account" />
                        <br />
                        <br />
                    </div>
                </div>
                <div class="col-sm-4" id="qr" style="margin: 0 auto;">
                    <div class="container-fluid p-3 mb5 bg-transparent rounded">
                        <i class="fas fa-home" aria-expanded="true" style="margin: 0 auto; font-size: 290pt; color: #32657c; opacity: 0.9;"></i>
                    </div>
                </div>
            </div>
        </div>
        <br />
        <br />
    </div>
    <div class="back-cont" style="background-color: #eeeeee;">
        <div class="container-fluid" style="text-align: center; padding: 30px;">
        </div>
        <br />
    </div>
    <div class="contain" style="margin: 0 auto; padding: 10px;">

        <br />
    </div>
    <!-- Footer -->
    <footer class="page-footer" style="background-color: #32657c; font-family: Nunito;">
        <br />
        <div class="row" style="font-size: 10pt; width: 98%; margin: 0 auto; padding: 10px;">
            <div class="col-sm-3 mx-auto text-sm-left">
                <h6 class="font-weight-bold mt-3 mb-4" style="color: #73afca;">Why Choose Us?</h6>
                <p style="color: #fff; font-size: 10pt;">
                    we offer the best prices for all kinds of clothing materials
                </p>
            </div>
            <div class="col-sm-2 mx-auto text-sm-left">
                <h6 class="font-weight-bold mt-3 mb-4" style="color: #73afca;">Company</h6>
                <ul class="list-unstyled">
                    <li><a href="About.aspx#comp" style="color: #fff;">About Us</a></li>
                    <li><a href="#" style="color: #fff;">Terms & Conditions</a></li>
                </ul>
            </div>
            <div class="col-sm-3 mx-auto text-sm-left">
                <h6 class="font-weight-bold mt-3 mb-4" style="color: #73afca;">Our Products</h6>
                <ul class="list-unstyled">
                    <li><a href="About.aspx#comp" style="color: #fff;">Jeans</a></li>
                    <li><a href="#" style="color: #fff;">Silk</a></li>
                    <li><a href="About.aspx#comp" style="color: #fff;">shirts</a></li>
                    <li><a href="#" style="color: #fff;">shorts</a></li>
                </ul>
            </div>
            <div class="col-sm-2 mx-auto text-sm-left">
                <h6 class="font-weight-bold mt-3 mb-4" style="color: #73afca; font-weight: 800;">Need Support</h6>
                <ul class="list-unstyled">
                    <li><a href="Contact.aspx" style="color: #fff;">Contact Us</a></li>
                    <li><a href="Contact.aspx#cont" style="color: #fff;">Enquiry</a></li>
                </ul>
            </div>
            <div class="col-sm-2 mx-auto" style="color: #fff;">
                <h6 class="font-weight-bold mt-3 mb-4" style="color: #73afca;">Contact</h6>
                <p>
                    support@cosmic.com<br />
                    hello@cosmic.com
                </p>
                <ul class="list-unstyled list-inline">
                    <li class="list-inline-item">
                        <a class="btn-floating btn-sm rgba-white-slight mx-1" href="facebook.com">
                            <i class="fa fa-facebook" aria-expanded="true" style="margin: 0 auto; font-size: 14pt; color: #fff;"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="btn-floating btn-sm rgba-white-slight mx-1" href="twitter.com">
                            <i class="fa fa-twitter" aria-expanded="true" style="margin: 0 auto; font-size: 14pt; color: #fff;"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="btn-floating btn-sm rgba-white-slight mx-1" href="whatsApp.com">
                            <i class="fa fa-whatsapp" aria-expanded="true" style="margin: 0 auto; font-size: 14pt; color: #fff;"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <hr style="color: #fff;" />
        <div class="row" style="font-size: 11pt; width: 96%; margin: 0 auto; padding: 10px; font-size: 10pt;">
            <div class="col-md-6" style="float: left;">
                <h6 style="font-weight: 700; color: #ffffff;">Office</h6>
                <p style="color: #ffffff;">
                    6 Street Federal Housing<br />
                    Kuje
                </p>
            </div>
        </div>
        <hr style="color: #fff;" />
        <div class="footer-copyright text-center py-3" style="font-size: 10pt; color: #fff;">
            <i class="fa fa-copyright" style="font-size: 9pt;"></i><%=DateTime.Now.Year %>&nbsp;<a href="#" style="font-weight: bold; color: #73afca; font-size: 10pt;">cosmic.com</a>
        </div>
    </footer>
    <!-- Footer -->
</div>

CSS

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
<link href="http://fonts.cdnfonts.com/css/renogare" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<style type="text/css">
    .wrapper {
        background-repeat: no-repeat;
        height: 1000px;
        background-position: center;
        background-size: cover;
        overflow: hidden;
        position: relative;
    }

    .footer {
        width: 100%;
        position: fixed !important;
    }

    .top {
        height: 100%;
        background-size: cover;
        background-color: rgb(245, 245, 245);
        width: 100%;
        z-index: 100;
    }

    .navbar-nav {
        margin-left: auto;
    }

    #navbarNav li a {
        color: #eeeeee;
        font-family: 'Be Vietnam', sans-serif;
        font-size: 11pt;
        font-weight: bolder;
    }

    .nav-item {
        float: right;
    }

    .navbar-nav .active {
        color: #eeeeee;
    }

    #navbarNav li a::after:hover {
        color: #eeeeee;
    }

    .navbar-brand:hover {
        color: #eeeeee;
    }

    .container2 {
        width: 100%;
    }

    .container {
        width: 100%;
    }

    .title {
        line-height: 1.33;
        letter-spacing: -.5px;
        margin-bottom: 5px;
        margin-top: 0%;
    }

    .desc {
        margin-bottom: 50px;
        margin-top: 12px;
        line-height: 1.7;
    }

    @media(min-width:992px) {
        .col-md-6:not(:first-child) {
        }

        .col-md-6:not(:last-child) {
            border-right: 1px solid #200662;
            border-left: 1px;
        }

        .form-horizontal {
            line-height: 1.33;
            letter-spacing: -.5px;
            margin-bottom: 5px;
            margin-top: 0%;
        }
    }

    #btnstart {
        border-radius: 5px;
        background-color: #32657c;
        font-weight: 500;
        font-size: 12pt;
    }

        #btnstart:hover {
            color: #eeeeee;
            background-color: steelblue;
        }

    #working {
        border-radius: 5px;
        background-color: #32657c;
        font-weight: 500;
        font-size: 11pt;
    }

    .img-circle {
        border-radius: 50%;
        float: left;
    }

    #imgone {
        width: 100%;
        height: auto;
    }

    @media screen and (min-width: 360px) and (max-width:640px) {
        #imgone {
            width: 100%;
            height: auto;
        }

        #boldhead {
            font-size: 17pt;
        }
    }

    .frontimg {
        width: 100%;
        height: auto;
    }

    .image-fluid {
    }

    .column {
        float: left;
        width: 33.33%;
        padding: 5px;
    }

    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    @media screen and (max-width: 500px) {
        .column {
            width: 100%;
        }
    }

    #newclients {
        font-family: 'Be Vietnam', sans-serif;
    }

    span.step {
        background: #ececed;
        border-radius: 1.6em;
        -moz-border-radius: 1.6em;
        -webkit-border-radius: 1.6em;
        color: #ffffff;
        display: inline-block;
        font-weight: bold;
        line-height: 2.5em;
        text-align: center;
        width: 2.5em;
        margin-left: auto;
        margin-right: auto;
        font-size: 20pt;
    }

    #dots {
        width: 100%;
        height: auto;
        position: absolute;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.2;
        margin-top: -29%;
    }

    #img6 {
        width: 100%;
        height: 200px;
    }

    #img7 {
        width: 100%;
        height: 200px;
    }

    #img0 {
        width: 100%;
        height: 200px;
    }

    @media screen and (min-width: 360px) and (max-width:640px) {
        #qr {
            display: none;
        }
    }
</style>

JavaScript

<script type="text/javascript">
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 50) {
            $('.navbar').css('background', '#32657c');
            $('.nav-link').css('color', '#eeeeee');
            $('.navbar-brand').css('color', '#eeeeee');
            $('#newclients').css('color', '#eeeeee');
            $('#newclients').css('border-color', '#eeeeee');
            $('#newclients').css('background', '#32657c');
        } else {
            if ($('#dvMobile').is(':hidden')) {
                $('.navbar').css('background', 'transparent');
                $('.nav-link').css('color', '#32657c');
                $('.navbar-brand').css('color', '#32657c');
                $('#newclients').css('border-color', '#32657c');
                $('#newclients').css('color', '#32657c');
                $('#newclients').css('background', 'transparent');
            }
        }
    });

    $(window).resize(function () {
        MobileNavColor();
    });

    $(function () {
        MobileNavColor();
    });

    function MobileNavColor() {
        if (!$('#dvMobile').is(':hidden')) {
            $('.navbar').css('background', '#32657c');
            $('.nav-link').css('color', '#eeeeee');
            $('.navbar-brand').css('color', '#eeeeee');
            $('#newclients').css('color', '#eeeeee');
            $('#newclients').css('border-color', '#eeeeee');
            $('#newclients').css('background', '#32657c');
        } else {
            $('.navbar').css('background', 'transparent');
            $('.nav-link').css('color', '#32657c');
            $('.navbar-brand').css('color', '#32657c');
            $('#newclients').css('border-color', '#32657c');
            $('#newclients').css('color', '#32657c');
            $('#newclients').css('background', 'transparent');
        }
    }
</script>

Screenshot