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");
Related
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" />
I'm trying to display an image for which the path is stored in the model.
The absolute path stored in the model maps to the physical path on the storage.
This works:
$("#uploadresults").prepend('<img src="../../Uploads/_MG_9806.jpg" alt="" />');
However this doesn't work:
$("#uploadresults").prepend('<img src= "'+#Url.Content(Model.ImageUrl) +'" alt="Image" />');
Model.ImageUrl = "C:\Users\Emad\Documents\Visual Studio 2013\Projects\projects_notworking\MarketSurvey\MarketSurvey\Uploads\_MG_9806.jpg"
It appears that in my view, I can only use relative paths to get it to work. Is there a way to convert my physical path to a relative path?
Try using a virtual path instead:
Model.ImageUrl = "~/MarketSurvey/Uploads/_MG_9806.jpg";
Virtual paths are relative to your web project's folder, so you might need to tweak that based on whether MarketSurvey is a folder inside your project, or your project folder itself.
And this simpler view code should work better:
$("#uploadresults").prepend('<img src="#Url.Content(Model.ImageUrl)" alt="Image" />');
Instead of using jquery to update images on the page, I used the server side variables in my view like this. This works for me:
<div id="uploadresults" class="">
#foreach (var item in Model.Images)
{
<img src="#item.ImageUrl.Replace(Request.ServerVariables["APPL_PHYSICAL_PATH"], "../../")" width=100 height=100 />
}
</div>
Of course credits go to this post: Getting relative virtual path from physical path
In my asp.net mvc3 project I have attachments section where user can upload his confidental images(scanned contracts), which i store on remote server. But when i render attachments i don't want to give full URI of image like
<img href="http://imageURI..." />.
I think i can render them trough controller action like
public ActionResult RenderImage
{
return File(...);
}
but in method File I can't pass URI path.
Can anyone suggest me better solution.
If the client browser is not IE8, just use Data URI Image. Check this out.
#Html.DrawImage("content/images/cat.jpg","funny cat")
Output
<img alt="funny cat" src="data:image/jgp:base64,________" />
So I'm developing a Model View Controller (MVC) project. Due to the size and complexity, I'm trying to ensure organization. I've managed to stumble on a unique quandary, one that has left me quite stumped. My issue is drawn from a Jquery Rotator that I'm integrating into my site.
My Solution Explorer:
Content : This particular folder contains three direct sub-folders Images, Scripts, and Stylesheets.
Those three sub-folders contain more specific and honed in details, an example would be the Scripts contains another folder called Rotator for this jQuery implementation.
So the dilemma occurs inside the View.
An example within this View:
<div class = "banner-style">
<div id = "Infinite-Banner">
<div class = "banner-container">
<div class = "slides">
<img src = "~/Content/Images/Banner/Slides/One.jpg">
<img src = "~/Content/Images/Banner/Slides/Two.jpg">
</div>
</div>
</div>
</div>
So within this structure it doesn't appear to load the Images. Though it is properly mapped to the directory. But if you use the same structure above but change the img portion to:
<div class = "slide-one" />
<div class = "slide-two" />
Then in a the correlating Stylesheet, simply define a background: url(~/Content/Images/Banner/Slides/One.jpg); for the slide-one Element it magically appears.
So this makes me believe that it is due to nesting. But doesn't quite make sense, as this will force me to build an inner element between the div slides so that I can generate the proper affects.
The other idea would be to create a model that maps all the relational image data; but that seems like an awful lot of work.
Is this a limitation or an issue specific to my machine? What would be the best work around to such an issue? Is this indeed due to the structure I've taken to my folders?
Try using the Url.Content method:
<img src="#Url.Content("~/content/images/banner/slides/one.jpg")" />
You didn't post what the actual URL is being built as, but, I would guess that the path is wrong because whatever controller you're hitting is being used in the relative path.
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