locked
Displaying a Simple Image - tearing my hair out! RRS feed

  • Question

  • User-16546190 posted

    Hi all - I am literally tearing my hair out with this!  I have a web app, its a simple ASP.NET Core Web App... created in VS 2019.

    In the project folder I have created a folder called images, and placed an image called Logo.jpg into that folder.  I want to display the image on a web page.  I have edited the default Index.cshtml to create an IMG tag referencing this image. 

    I have tried everything I can think of to make this image appear in the Index.cshtml output but everything i try ends up with the broken image (404) icon.  Heres the source for Index.cshtml;

    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }
     
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <img src="~/images/Logo.jpg" />
        <img src="~\images\Logo.jpg" />
        <img src="images/Logo.jpg" />
        <img src="/images/Logo.jpg" />
        <img src="../images/Logo.jpg" />
        <img src="@Url.Content("~/images/Logo.jpg")" />
        <img src="@Url.Content("Logo.jpg")" />
        <img src="@Url.Content("/images/Logo.jpg")" />
        <img src="@Url.Content("images/Logo.jpg")" />
        <img src="@Url.Content("../images/Logo.jpg")" />
     
        <img src="~/images/Logo.jpg" runat="server" />
        <img src="~\images\Logo.jpg" runat="server"/>
        <img src="images/Logo.jpg" runat="server"/>
        <img src="/images/Logo.jpg" runat="server"/>
        <img src="../images/Logo.jpg" runat="server"/>
        <img src="@Url.Content("~/images/Logo.jpg")" runat="server"/>
        <img src="@Url.Content("Logo.jpg")" runat="server"/>
        <img src="@Url.Content("/images/Logo.jpg")" runat="server"/>
        <img src="@Url.Content("images/Logo.jpg")" runat="server"/>
        <img src="@Url.Content("../images/Logo.jpg")" runat="server"/>
     
     
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    </div>

    Obviously, what you can see is a load of different attempts, different syntaxes, differing relative paths to try to get this image to show but nothing works.  

    I have set the properties of the image itself to be Build Action: Content and Copy to Output Directory: Copy Always, and the image is present in the <project>\bin\Debug\netcoreapp3.1\images folder

    I am obviously doing something fundamentally wrong but for the life of me I can't work out what it is!

    Could someone please point me in the right direction with this?

    Many thanks in advance

    Chris

    Saturday, January 30, 2021 9:19 AM

All replies