• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • Last Modified:

How to dynamically pass in <item.Id> and <item.ImageUrl> in an Image Tag

Hi,

I'm finding it difficult to pass in the id and the imageUrl values from a database into an image tag, as shown below

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<RetailUploader.Website.Models.ViewModels.Images>>" %>
<p class="CreateButtonStyle">
    <%= Html.ActionLink("Create New", "Create", null, new { @class = "createImage", title = "Create Image" })%>
</p>
<table>
    <tr>
        <th>
            card Image
        </th>
    </tr>
<% foreach (var item in Model)
   { %>
    <tr>
        <td>
            <img src="~/Uploads/" + <%: item.Id %> + "/" + <%: item.ImageUrl %> + "") alt="" />
        </td>
    </tr>
   <% } %>
</table>

When the page renders, nothing displays apart from the table.

Is this the best way to render an image from a database?

Thanks,
Nick
0
nickward26
Asked:
nickward26
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
View the source of your rendered html

You should end up with

<a href="somepage.html"><img id="123" src="/images/abc.jpg"></a>
0
 
nickward26Author Commented:
Hi,

Thanks for your help, I have been able to successfully get the ImageUrl to render on the page, using the below code:

Controller;
        public ActionResult WebBackground(int id = 3)
        {
            return PartialView("WebBackground", db.ImagesCollection.Find(id));
        }

User Control (Partial)

WebBackground.cshtml

@model MvcMusicStore.Models.ViewModels.Images
@Url.Content("~/Content/media/" + Model.Id + "/" + Model.Image + "")

View
    <style type="text/css">
        .header { background: url(@Html.Action("WebBackground")) repeat 0 0;}
    </style>

This seems to work, there maybe better ways to tackle this problem, but this solution allows me to easily render a ImageUrl from the database and store the image files locally on the web server.

Thanks,

Nick
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now