ASP.net core display variable in an img tag for src

Question

I am trying to use a variable that I set in my controller to be the src inside of an img tag. I copied the string in directly and it worked so I know my path is correct. However, I am having trouble figuring out how to place the variable I create into the img tag.

Here is my controller:

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace dojodachi.Controllers
{
    public class HomeController : Controller
    {
        // GET: /Home/
        [HttpGet]
        [Route("")]
        public IActionResult Index()
        {
            ViewData["Tree"] = "~/images/regular_tree.jpeg";
            return View();
        }
    }
}

Here is my cshtml file

<div id = wrapper>
    <p>Fullness:    Happiness:      Meals:     Energy</p>
    <div id = inside>
        <img src="@ViewData['Tree']" alt="Regular Tree"> //How do I place my variable in this img tag?
        <p></p>
    </div>
</div>

It looks like you are using MVC (Model View Controller)... how come you don't have a model? — Erik Philips
– Erik Philips, Commented Dec 27, 2016 at 1:53

Klinger · Accepted Answer · 2016-12-27 01:08:06Z

6

Just use single quotes on the outside and double quotes on the property:

<img src='@ViewData["Tree"]'

If you are using C# 4 you could also use ViewBag instead of ViewData.

On controller:

ViewBag.Tree = "~/images/regular_tree.jpeg";

Then on view:

<img src="@Url.Content(ViewBag.Tree)"

edited Dec 27, 2016 at 1:08

answered Dec 27, 2016 at 0:53

Klinger

4,9701 gold badge32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aaron Over a year ago

Thanks, but now for some reason I am getting a 404 error. When I hard code the string in the image shows up, but when I use a variable I get a 404 error

Klinger Over a year ago

@Aaron If you set the url on the controller with the server relative ~ then use Url.Content to resolve the URL during view rendering.

B.S. · Accepted Answer · 2021-04-08 10:39:53Z

0

It's an old question, but having similar issue today, so maybe can help others, solved as follow:

Controller:

ViewData["Tree"] = "images/regular_tree.jpeg";

View:

<img src="~/@ViewBag.Tree">

answered Apr 8, 2021 at 10:39

B.S.

6881 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

ASP.net core display variable in an img tag for src

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related