I am trying to display images on my web api that are located on the server side.
for now I have added them in my solution in visual studio (I added two to try, I specified one as embedded ressource and one as none as build action. they are directly in WebAPISolution/xxx.png not in a subfolder
In my cshtml page, I put this:
<div>
<p>Test image</p>
<img id="img1" alt="Image1.png" src="#Url.Content("~/Image1.png")">
</div>
and on my web page it doesn't shows up.
it seems to look for it at:
view-source:https://xx.xx.xx.xx:5001/Image1.png
and the error message is
"can't be displayed because it contains error"
, it just doesn't find it I guess because the same with ImageXXX.png which doesn't exist return the same error
I don't get why the image doesn't shows up.
here is how is organized my solution folder
1 ) In your Startup Class you should add app.UseStaticFiles(); within public void Configure() method
2) Put your image in the wwwroot folder
3) add this code to your razor view <img src="~/Image1.png" />
Related
I am storing the content for my page in a sql server database. When i load the content onto the page i have a tag:
<img src="~/Images/Course/html.jpg" />
The html is being rendered using #Html.Raw(content).
when the page loads i get the error:
GET http://localhost:51249/Course/Index/~/Images/Course/html.jpg 404 (Not Found)
I dont know why it does this. Is there any way to have images stored in files within the project, then when loading the html from the db the local linking works? Do I have to host the images somewhere and link to them via https? Any help would be great.
Fixed it - just remove the tilda from the value in the database. Here's a small sample code in the HTML to reproduce the same problem:
<img src="~/images/house.jpg" />
#{
var something = "<img src='/images/house.jpg' />";
}
#Html.Raw(something)
The first line displays the image direct from the location, using the tilda, which .net resolves to the root of your project.
The second line doesn't use the tilda, which automatically comes from the root of the project, but leaving the tilda in messes up.
Fix: delete one character from the HTML stored in the database.
For reasons outside my control I have been requested to render a series of images on a web page (sort of a gallery view) based on a directory structure utilizing a UNC path. You'll note that I'm using relative paths as I work on this but will be deploying the site using UNC conventions.
I’ve created the following partial view to render the images, I can format later.
#model System.Collections.Generic.List<string>
#foreach (var image in Model)
{
<div id="ptImage">
<img src="#image" alt="#Path.GetFileName(image)"/>
</div>
}
Where #image above represents the absolute path to the image needing to be rendered.
The paths displayed in view source of the page are what I feel I should be expecting back and truly define locally the location of the image. When accessing images via a relative path is this what others would expect?
<div id="gImg">
<img src="C:\Projects\Test_Site\Site_1\ES3\ES3_0.bmp" alt="ES3_0.bmp" />
</div>
<div id="gImg">
<img src=" C:\Projects\Test_Site\Site_2\ES4\ES4_0.jpg" alt="ES4_0.jpg" />
</div>
When the partial view loads I only see the alternative text of the image, not the image itself. A look at the IIS Express log tells me the following:
http://localhost:1348/TestGallery/ 404 0 2 6, This resource lead me to understand that 404 0 2 x seems to indicate the resource isn't found.
With that truly being the path to the file, what is IIS expecting as a valid input to locate the resource? I'm not sure how to phrase the question to perform a further search.
The src paths in the img tags need to be web site URLs, not actual file locations on disk. Your web app should translate the URLs to grab the image from the appropriate location.
One possible solution:
Make a custom entry in your application's RouteConfig.cs to treat all items on a certain URL path dynamically. (In this example it is a separate controller.)
routes.MapRoute(
name: "Images",
url: "image/{*querypath}",
new { controller = "Image", action = "Retrieve" }
);
In the code that handles arbitrary query path, translate the relative URL (in querypath above) to the UNC path you're looking for and serve the image.
return File(UncRootPath + querypath, "image/png");
I am getting an error in developing a MVC4 Intranet application, trying to use multiple page layouts. As I see, the problem is not present when Internet application is used, here is quick demo.
Create new Internet application using Razor engine. Copy file _Layout.cshtml to Popup_Layout.cshtml (both in ~/Views/Shared), and strip header and footer sections in Popup_Layout. In ~/Controllers/HomeController.cs modify Index action with following code:
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
string layout = "_Layout";
if (DateTime.Now.Ticks % 2 == 1)
{
layout = "Popup_Layout";
}
return View("Index", layout);
}
That creates a simple game which randomly chooses to use one of two available page layouts. When compiled and tested, with refresh in browser we can see start page with or without header and footer sections.
Now if we repeat the exactly same scenario with only difference that project is Intranet application - build goes OK, but with refreshes in browser instead of getting a page without header and footer we get the server error, with the top of Stack trace says:
[InvalidOperationException: The view 'Index' or its master was not found or no view engine supports the searched locations. The following locations were searched:
~/Views/Home/Index.aspx
~/Views/Home/Index.ascx
~/Views/Shared/Index.aspx
~/Views/Shared/Index.ascx
~/Views/Home/Popup_Layout.master
~/Views/Shared/Popup_Layout.master
~/Views/Home/Popup_Layout.cshtml
~/Views/Home/Popup_Layout.vbhtml
~/Views/Shared/Popup_Layout.cshtml
~/Views/Shared/Popup_Layout.vbhtml]
System.Web.Mvc.ViewResult.FindView(ControllerContext context) +399386
As an alternative, layout can be determined in View itself with assignment ~/Views/Shared/Popup_Layout.cshtml to Layout property, but it also throws an error.
I didn't find the solution using web, so I hope someone can help me here. Thanks
Try deleting Popup_Layout.cshtml then instead of copy pasting the _Layout.cshtml create a new empty view page for Popup_Layout. After you have a new empty view page copy paste the content (if you wish). I don't know why but I tried it on my test project and it worked. I used a regular web app (not an intranet app) but I experienced the same missing view error you described.
I think the key is the way the view file was created. I copied the file and renamed it and seen the same error. When I properly created a new view and then copied in the content it all worked.
Dear noviKorisnik i tried to replicate your error as per you written here but i am not getting the error as you specified .
Your error first line is
The view 'Index' or its master was not found or no view engine supports the searched locations. The following locations were searched:
~/Views/Home/Index.aspx
I believe mistakenly you deleted the index.cshtml .
Please be sure you have index.cshtml in the right folder .if you still get the error please give more detail .
I have an MVC4 web application that i'm adjusting. Currently a controller loads Index.cshtml. In that file i have the following line:
#{
Layout = "~/Views/Shared/_Layout-DoubleColumn.cshtml";
}
So i changed that line to:
#{
Layout = "~/Views/Shared/_Layout-TripleColumn.cshtml";
}
I also copied to _Layout-DoubleColumn.cshtml file and renamed that to _Layout-TripleColumn.cshtml.
Now when i run the application i get the following error message:
The layout page "~/Views/Shared/_Layout-TripleColumn.cshtml" could not
be found at the following path:
"~/Views/Shared/_Layout-TripleColumn.cshtml"
I have no clue what the problem could be, because i'm sure that the file is in the Shared folder...
Anyone any idea what the problem could be?
Make sure the Build Action of the file is set to Content in the properties of the View.
I have a website that is working fine with Razor (C#) all the coding is working properly when I use my local testing (WebMatrix IIS).
When I put it "online" on my server the website is not at the root of the site it self
For example:
http:// intranet.mycompany.com/inform
That's basically the "root" of my folder structure so all my folders starts from there (css file default.cshtml... and so on)
My "_PageStart.cshtml" sees it properly cause when I access my site from the link http://intranet.mycompany.com/inform it gives me the Layout I have configured in _PageStart.cshtml (and it really show the layout + the rendered default.cshtml)
BUT nothing else is getting the proper path, for example :
<img src="~/images/logos/hdr.png" />
The img holder is there I can see it but shows that the link is broken... when I Right-Click the img holder and do properties to see where the files should be it shows me :
http:// intranet.mycompany.com/images/logos/hdr.png
So it's going to the "full" root not the relative root...
How can i fix that ?
You have to use relative paths all over your app:
~ won't work within static html code.
You can write
<img src="#Url.Content("~/images/logos/hdr.png")" />
or
<img src="../images/logos/hdr.png" />
The first approach is good for layout files where your relative path might be changing when you have different length routing urls.
EDIT
Regarding to your question about normal links:
When linking to another page in your app you don't specify the view file as the target but the action which renders a view as the result. For that you use the HtmlHelper ActionLink:
#Html.ActionLink("Linktext", "YourController", "YourAction")
That generates the right url for you automatically:
Linktext
EDIT 2
Ok, no MVC - so you have to generate your links yourself.
You have to use relative paths, too. Don't start any link with the / character!
Link
Link
Link
EDIT 3
When using Layout pages you can use the Hrefextension method to generate a relative url:
<link href="#Href("~/style.css")" ...
Use Url.Content as shown bellow:
<img src="#Url.Content("~/images/logos/hdr.png")" />
I know that '~' is added by default, but I tend to change it so that all paths are relative to my code file rather than application root, using ".." eg. "../images/logos" etc