Adding src Dynamically to img in C# - c#

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?

Related

img tag doesnt print thumbnailed photo

im doing a project using .net MVC web Application.
i recently used a code to create a new thumbnail to photos (re defining the sizes of a photo) . and now i'm trying to print the photos using the 'img' tag of HTML but without success.
the thumbnail creating code :
Image thumbnail = Image.FromFile(destPath);
thumbnail = (Image)(new Bitmap(thumbnail, new Size(this.m_thumbnailSize, this.m_thumbnailSize)));
thumbnail.Save(destPathThumb);
now for the img printing :
#Html.DisplayFor(modelitem=>item)
<img class="img-rounded" style="border-radius:50%" src=#item alt="">
item is the path to the picture and it is currect (ive checked serveral times).
any ideas what i could be ?
thank you for helping me ! :)
EDIT: the img tag prints normal pictures -> pictures that my program did not create(as i said,my program created thumbnail pictures)
I wonder if it is not releasing the file lock on the image, I have had that problem in the past. You have to be very careful about releasing those Image and Bitmap objects.
Something like this might work, as it will dispose the image before the page starts using it:
using(Image thumbnailoriginal = Image.FromFile(destPath)){
using(Image thumbnail = (Image)(new Bitmap(thumbnailoriginal, new Size(this.m_thumbnailSize, this.m_thumbnailSize)))){
thumbnail.Save(destPathThumb);
}
}
It seems like a lot of brackets on the end but thats ok.
If it still does not work, can you post the html that is sent to the browser, you can do that using "View page source" from the right-click menu in Chrome.
Now we have the html that is going to the browser, we can see that the src attribute is pulling directly from the C drive, rather than from a web url:
<img class="img-rounded" style="border-radius:50%" alt="" src="C:\Users\Operu\Desktop\dest\Thumbnails\2018\6\Sasuke.png">
Normally we would want to see something more like this:
<img class="img-rounded" style="border-radius:50%" alt="" src="\Thumbnails\Sasuke.png">
Could you post the model and controller files next please, so we can see what type of object the #item is when it hits your view. Then we can hopefully get it to pull the relative url address instead of the file location.

Html Image control not displaying image

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\");

Drawing an SVG File in WinRT

I'm trying to draw a SVG File. So far I've tried using an Image tag and a WebView with the svg itself or an object / embed tag. Nothing so far seems to help, and all the dll's I've found so far need .NET.
Examples of what I've tried so far (note: Paths have all been tried with or without ms-appx:///, note2: using img tag in webview for non-svg types hasn't worked either)
WebView:
webView.NavigateToString("<embed src='circle1.svg' type='image/svg+xml' />");
webView.NavigateToString("<object data='circle1.svg' type='image/svg+xml' />");
webView.NavigateToString("<svg>....</svg>");
Image:
<Image Source='circle1.svg'>
I am not sure if you can include external images this way, have you tried with other image formats? Have you tried using an absolute path? I would also consider using the data tag as image source instead of an external file.
Example (from wikipedia):
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
alt="Red dot">
Additionally, there is project in codeplex called xamltune that can convert a svg file into an xaml file. Maybe you can insert the output xaml code in your application instead of using a WebView.

Using site root relative links in Razor

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

How to reference embedded images from CSS?

I have a CSS file that is embedded in my assembly. I need to set a background image for certain elements using this CSS file, and the image needs to be an embedded resource also. Is this possible? Is there any way I can reliably do this?
I ran into the problem when putting an existing stylesheet into this dll then realized images weren't showing up. I don't know of any way to make it work though because I would need to know the URL to the embedded image.
Has anyone done anything like this?
<% = WebResource("image1.jpg") %>
You can use above statement inside your CSS file, and while you register your CSS with
WebResourceAttribute, you can set "PerformSubstitution" to true
Default.css
body{
background: <%=WebResource("xyz.jpg")%>
}
[assembly, WebResource("Default.css","text/css", PerformSubstitution=true)]
[assembly, WebResource("xyz.jpg","image/jpg")]
Just follow the following steps to refer a web resource as background Image in CSS
Refer Image URL as "background: url('<%=WebResource("xyz.jpg")%>');" in following manner.
Default.css
body{
background: url('<%=WebResource("xyz.jpg")%>');
}
In AssemblyInfo.cs file register the CSS file with "PerformSubstitution=true" attribute in following manner
[assembly, WebResource("Default.css","text/css", PerformSubstitution=true)]
Now again in AssemblyInfo.cs file register the image file as
[assembly, WebResource("xyz.jpg","image/jpg")]
Right Click the Image File (xyz.jpg) and CSS File (Default.css) and click on Properties now select "Build Resource" option as "Embedded Resource".
and its done.
Happy Coding !!!
Mine is a slight variation on the other suggestions but it works for my inline CSS within my ASP.NET page
Add the following entry to the AssemblyInfo.cs file - [assembly: WebResource("MyImageFile.png", "image/png")]
add the following code within the CSS to reference the embedded resource - background-image: url('<%= Page.ClientScript.GetWebResourceUrl(typeof(MyUserControl), "MyImageFile.png") %>')
What about exposing the resources through a Web service?
Such as in the CSS file, set background: url( getImage.aspx?image=newyork.jpg )?

Categories