I'm new to MVC 3 and still learning. I'm currently building a static 2 page website which has a different image on both pages but are located in the same place. I have been told that I can use the ViewBag to change this image depending on what page I am on, however I have not got a clue where to begin with applying this to my website.
Any help will be greatly appreciated. Thank You for your time.
On your controller's Action method,make ViewBag or ViewData like this
ViewBag.Imagename="nameofimage";
ViewData["img"]="nameofimage";
On your view, you can make img tag like this
<img src="#ViewBag.Imagename">
or if you have created ViewData
<img src="#ViewData["img"]">
For some reason, it did not work for me when I simply tried using
#ViewBag.BackgroundImage = "~/Content/images/image.jpg"
...
<img src="#ViewBag.BackgroundImage" />
But what did work for me was
#ViewBag.BackgroundImage = "image.jpg"
...
<img src = "~/Content/images/#(ViewBag.BackgroundImage)" />
personally i dont like specifying anything view related in controller, i am using naming convention between action method names and images:
<img src="~/Content/images/#(ViewContext.RouteData.Values["action"].ToString().ToLower())_img.jpg">
and picture name for index action method would be "index_img.jpg"
For those who want use full path in viewbag, use this
#ViewBag.BackgroundImage = "Content/images/image.jpg"
...
<img src="~/#ViewBag.BackgroundImage" />
The reason why hallordylo example not working with full path is missing "~/" in src="..." and this sign "~/" should not be inside ViewBag.
Related
I'm showing images from resources/static/images/
The weird thing is if I give the path like "/images/milk.png", it shows the image but if I get name from ${}, it doesn't work.
<img class="card-img-top"
th:src="#{/images/${res.getLogo().getUploadFileName()}}"
th:alt="${res.getLogo().getUploadFileName()}" />
it seems res.getLogo().getUploadFileName() is working well. So it will be replaced like /images/milk.png. But it doesn't show the image...
How can I fix this?
One more thing, I know basic Thymleaf path is resources/templates, but how it recognize image when I gave like "/images/milk.png"
If u want to upload static images
th:src="#{images/} + ${res.logo.uploadFileName}"
if you want to upload dynamic images
th:src="#{https://~~~.com/} + ${id}
For the <title> I've followed this SO answer This is working perfectly for part but the image is not working
Laravel dynamic page title in navbar-brand
But, Here when I try to make an image dynamic instead of title it's giving me a text instead of an image.
For instance,
header.blade.php
#yield('image')
In another blade, I called image as in section
#section('image', '<img src="http://localhost/appname/public/front/images/heading.png">')
Every page has a dynamic logo so I want to put logo dynamic the same like we're doing in the title.
But the result I'm getting is
<img src="http://localhost/appname/public/front/images/heading.png">
You can do like this
#section('image')
<img src="http://localhost/appname/public/front/images/heading.png">
#endsection
i create a Document(PDF) and get the Content from the Umbraco nodes.
But there's a problem by displaying the images. How can i display or get the images from the Media libary of Umbraco? Is there a way, offered from Umbraco to get the Image(s)?
Thanks a lot.
If I understand your query correctly, you a pretty much there.
You should simply be able to get the umbracoFile path (just like you are for the PDF file) and simply declare it as the img src!
With Razor...
<umbraco:Macro runat="server" language="cshtml">
<img src='#Model.MediaById(#Model.imgProperty).umbracoFile' alt="" />
</umbraco:Macro>
How to set image path dynamically for following:
<img src="/Images/Model" + #item.ModelImagePath />
"/Images/Model" this path is fixed, rest of the path comes from [ModelImagePath] column of Model DBTable.
Please guide me how to set the path dynamically in View.
And is there any Html helper tag to display image available in MVC RZOR?
Note: i have similar type of problem as described in
How to use/pass hidden field value in ActionLink
<img src="#Url.Content(String.Format("~/Images/Model/{0}", item.ModelImagePath))"
If you have already saved the entire path into the table, follow it
<img src="#Url.Content(String.Format("{0}",item.ModelImagePath))"/>
or
<img src="#Url.Content(item.ModelImagePath)" style="width:100px;height:100px"/>
I wondered if it is possible to show picture in a view without calling an action. The picture is displayed by using the following Razor code:
<img class="photo" src="#Url.Action("GetImage", "Home", new { id = #Model.Id })" />
But retrieving picture from server requires an additional request.
Is it possible to "deploy" image in ViewBag and show it in view without calling server?
Thanks,
Is it possible to "deploy" image in ViewBag and show it in view without calling server?
You could use the Data URI scheme. But be careful as it might not be supported by all browsers.
Example:
<img class="photo" src="data:image/png;base64,iVBORw0KG....." alt="" />
where src attribute of the image contains the Base64 encoded image that could come from ViewBag or a view model.