Cannot Display an Image (404)

Question

I'm looking into upgrading an existing MVC5 project to MVC6. However when I try to get an image to display in the MVC6 project, it 404s. The path to the image is:

    /Content/images/image.png  

In my MVC5 project, the following works:

    <img src="@Url.Content("~/Content/images/image.png")" />

I have tried the following:

    <img src="@Url.Content("~/Content/images/image.png")" />
    <img src="@Url.Content("/Content/images/image.png")" />
    <img src="@Url.Content("Content/images/image.png")" />
    <img src="@Url.Content("~Content/images/image.png")" />
    <img src="~/Content/images/image.png" />
    <img src="/Content/images/image.png" />
    <img src="Content/images/image" />
    <img src="~Content/images/image.png" />
    <img src="C:\absolute\path\Content\images\image.png" />

Has the way to reference an image changed with MVC6?

Answer 1

You need to put the image under the wwwroot folder. Only static files under this folder are served up. You also need to make sure you have added support for static files in your Startup.cs file.

public void Configure(IApplicationBuilder application)
{
    // Add static files to the request pipeline e.g. hello.html or world.css.
    application.UseStaticFiles();

    // Add MVC to the request pipeline.
    application.UseMvc();
}

Answer 2

While I think it's better to move your files into the wwwroot folder as in the accepted answer to follow standard convention, you can also change the path for static files via configuration.

In your project.json file, change the configuration attribute to point to your static file path.

"webroot": "wwwroot"

Just an alternative approach.