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
Related
I have an img tag.
(I am using just image and not asp.net because it is an imageMap that I have working with an img).
I dynamically set the src as below in 3 different ways. The first way works and the image is included in the project. But when I try to add the src the 2nd way it fails to display the image. That image is not part of the project. I have even tried the 3rd way for a different location but it fails to load as well. It is not part of the project either. What I need to be able to do is load ans image src dynamically that is not included in the project and have it display.
<img runat="server" class="ImageMap" id="ImageMapID" src="" usemap="#imagemap" />
ImageMapID.Attributes["src"] = #"/Icons/XXXX XXXX.png";//first way that works
ImageMapID.Attributes["src"] = #"/documents/XXXXX/XXXX_04092017.pdf"; // second way that fails
ImageMapID.Attributes["src"] = #"file://C:/temp/XXXXXXXX.pdf";// third way that fails
Any ideas anybody? I should add they are different images but they should all work.
First thing you should know, PDF files are not image objects, so you can't use img tag to embed it. You need to use iframe tag instead:
<iframe src="file:///C:/temp/XXXXXXXX.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
...
</iframe>
Or use embed/object tag with same file path:
<embed src="file:///C:/temp/XXXXXXXX.pdf" width="600" height="400" type="application/pdf">
<object type="application/pdf" data="file:///C:/temp/XXXXXXXX.pdf" title="XXXXX" width="600" height="400" >...</object>
If you want to include local file path for images, use file reference path or relative path with proper directory structure shown in example below:
ImageMapID.Attributes["src"] = #"file:///C:/temp/Icons/XXXXXXXX.png";
// watch out for current relative path you're using
ImageMapID.Attributes["src"] = #"../../temp/Icons/XXXXXXXX.png";
Note that Windows local drive path uses this format to refer any files for use in any HTML elements with source attribute:
file:///[drive letter]:/[path_to_resource]/[filename].[extension]
References:
How to properly reference local resources in HTML?
Recommended way to embed PDF in HTML?
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");
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.
Below is my html image control:
<img alt="" src="C:\Users\hkalidindi\Desktop\Feedback.jpg" style="height: 19px; width: 20px"/>
But after debugging it is not showing me any image:
I am new to dotnet..please help me to solve this issue...I know how to display image in image control but i am bit confused about the html image control...
Use image only from the content of your website. So copy the image in your website folder say Images and access your image as <img alt="" src="..\images\Feedback.jpg" style="height: 19px; width: 20px"/>. Or you could use Asp.NET Image control and set image path in Server code using
myImage.ImageUrl=Server.MapPath("Images\Feedback.jpg");
"C:\Users\hkalidindi\Desktop\"
Is only local, try uploading it to a website such as http://imageshack.us, http://tinypic.com, grab the direct link and put that in the source.
<img src="URL">
Here URL = The url of the image.
Possible values (for src):
An absolute URL - points to another web site (like src="http://www.example.com/image.gif")
A relative URL - points to a file within a web site (like src="image.gif")
Refer: HTML src Attribute
You are trying to call the image in your local folder. Add the image to the 'Images' folder in your solution and link to that.
Make sure the image is being referenced from a folder that is in your websites application/dir. Then you can reference it simply by using a tag like so:
<asp:Image id="imgFeedback" runat="server" ImageUrl="~/_common/img/feedback.jpg" />
Or set the image path on the server side:
this.imgFeedback.ImageUrl = Server.MapPath("\_common\img\feedback.jpg\");
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