Url.Content is not showing image in razor view - asp.net-mvc

I have a model class Registration in which I have a photo property which is saving the URL of the photo, my photos are saved in the images folder onto the root.
Now when I am trying to show the images it is not showing the image I have cross verified that the image is present there.
I have tried <img src="#item.Photo" width="100" height="100" />
#*<img src="#item.Photo" width="100" height="100" />*#
also I have tried
<img src="#Url.Content(#item.Photo)" height="25px" width="50px" />
my path becomes /imges/previous theme.jpg even adding ~ in start it is still not showing the result, I have images folder onto the root and inside that I have previous theme.jpg file
It should show the result as image, even after removing the url.Content
<img src="#item.Photo" />
is also not working.


#Url.Content(#item.Photo) is likely the binary representation of your image. An img src= tag must contain a url to the image, not the binary representation of the image itself


i think you should press F12, in the console tab you can see your wrong path image, and you can fix the path base on it.


Razor has been changed a little with ASP.NET MVC 4 beta.No more #Url.Content.
Now, instead of
<img src="#Url.Content("~/path")">
you can use
<img src="~/path">
Kindly check what you are getting in the console. check the path is correct.

Related

Image loads as a black rectangle when the image file is stored locally

I'm new to a-frame and created this project in Glitch.
Here is my code.
<a-assets>
<img id="image" src="arrow.png" crossorigin="anonymous">
</a-assets>
<a-image src="#image" width="2" height="0.8"></a-image>
There is no error with the path of arrow.png because I don't get 404 error in console. If I change spelling in "arrow.png" I get a 404.
The image appears as a black box.
But if I use an online resource instead, it displays correctly.
<a-assets>
<img id="image" src="https://i.imgur.com/wjobVTN.jpg" crossorigin="anonymous">
</a-assets>
I created a GET endpoint in the express server that returns the image.
// Return arrow
path = `${__dirname}/views/arrow.png`
app.get('/arrow', (request, response) => {
response.sendFile(path);
});
When I go to the endpoint from my browser, the entire screen is black.
EDIT
Glitch project link
https://glitch.com/~quickest-catshark

Looking at your project structure on Glith, you need to move the arrow.png to your public folder.
Remixed glitch: https://glitch.com/~scalloped-lemongrass

How do I add a period after #viewDataTeam.ID to display an image?

I want to display an image and the file name is from a viewData so here's what I did
<img src="~/Images/team_logo/#viewDataTeam.ID.png" width="50" />
but it gives me an error because it thinks that the .png is a method but what I meant for .png is a file extension.
I could use something like this <img src="~/Images/team_logo/#viewDataTeam.ID _.png" width="50" /> then rename the image to 2 _.png but is there another way so I could use 2.png?

Why does my Google chart not appear in Fusion Tables infowindow?

I'm trying to use Google's Chart API to display a chart in an infowindow.
https://www.google.com/fusiontables/DataSource?classic=true&docid=1z614mo0DPw19PX00IFsW7g0S-yilCmUTQaKLjiw
I've created the following img using the chart wizard:
What I want to do is tweak it so I can pass in parameters, but it doesn't appear.
Here's the code of the original (which appears above):
<img src="//chart.googleapis.com/chart?chxl=1:|2008|2009|2010|2011&chxr=0,0,5000|1,-5,100&chxs=0,676767,10.5,0.333,lt,676767|1,676767,11.833,0.167,l,676767&chxt=y,x&chs=300x173&cht=lxy&chds=0,5000,0,5000&chd=t:-1|111,122,1685,4699&chdlp=b&chls=3&chma=|2,4&chtt=Tickets+issued+in+xxx&chts=676767,11.833" width="300" height="173" alt="Tickets issued in {Road}" />
Here's my effort, which doesn't work.
<img src="//chart.googleapis.com/chart?chxl=1:|2008|2009|2010|2011&chxr=0,0,5000|1,-5,100&chxs=0,676767,10.5,0.333,lt,676767|1,676767,11.833,0.167,l,676767&chxt=y,x&chs=300x173&cht=lxy&chds=0,5000,0,5000&chd=t:|{2008},{2009},{2010},{2011}&chdlp=b&chls=3&chma=|2,4&chtt=Tickets+issued+in+{Road}&chts=676767,11.833" width="300" height="173" alt="Tickets issued in {Road}" />
What am I doing wrong?

The reason it didn't work was because there wasn't an 'http:' at the start of the img src bit.

MVC 3 - _Layout.cshtml. Add a logo to the site

I'm new to MVC 3, I'm trying to add an Image to the _Layout.cshtml file.
I tried
<img runat="server" id="img_logo" alt="Logo" src="Content/Images/mailworks.png" />
no success. The logo only appear on some views. on others views for some reason the image is supposed to be in some other location - found it using firebug.

Try this:
<img id="img_logo" alt="Logo" src="#Url.Content("~/Content/Images/mailworks.png")" />

Use this:
<img src="#Url.Content("~/Content/Images/mailworks.png")"...

I found another quick solution : just append '/' at the beginning of the src's path.

Using Url.Content with semi-relative URL

I am storing the location of images in my database in an MVC application...but i am only storing part of the location. For example:
/headers/image1.jpg
/headers/image2.jpg
The images are actually stored in the following folder:
~/content/images/headers/image1.jpg
~/content/images/headers/image1.jpg
In my view, I want to do something like this:
<img src="#Url.Content("~/content/images") + Model.ImageUrl" />
How can I do this?

Just do it!
<img src="#Url.Content("~/content/images" + Model.ImageUrl)" />
UPDATE:
As of ASP.NET MVC 4 it is valid to use the tilde URLs directly in HTML as the Razor View Engine will parse the URLs. Like this:
<img src="~/content/images/#Model.ImageUrl" />

You can write extension method which combine your ImageUrl with configured path to content directory.
<img src="#Model.ImageUrl.ToRelative()" alt="#Model.ImageAlt" />
PS
Remember about alt tag. ;)

Resources