MVC 5 ASP.NEt Accessing #model in the middle of img src - c#

I need to display images to the screen based on the id passed to the view from the model. I'm new to C#, so I'm not sure if it's possible or what syntax is needed to add variables to my img src.
<img src="~/Content/Images/Sprites/#item.pkmnDataId"/>
(just assume for now #item.pkmnDataId = 1)
That will not work because it will request ~/Content/Images/Sprites/1
and it needs to request ~/Content/Images/Sprites/1 .png
Is it possible to concatenate a '.png' to the img src string (with no space between)?
Thanks!

Related

C# Selenium - Can't access image url in another tag

I'm trying to validate image on website however can't access the url of the image.
Most websites will have the image with a "src" tag however this website has the url imbedded in another tag.
Iv used return driver.FindElement(By.ClassName("p-image__image--contain")); to access the element and used GetAttribute("style"); to access the image url. However the only information given was background-position: center center;
html format
When you use GetAttribute("style"), it will only return whatever was in the actual style attribute on the element, but many CSS attributes are actually applied using class stylesheets or other ways. So instead you should use the GetCssValue method, like so:
element.GetCssValue("background-image")
getCssValue(); will help in this case
WebElement img = driver.findElement(By.className('imgClass'));
String imgPath = img.getCssValue("background-image");
you will got full values in imgPath, Value like url("imageURL") then you need to use regex OR get values by slip function
I hope this scenario will help

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.

ASP.NET unable to display image

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

Umbraco display images created from image cropper using razor

How can I display images created using the image cropper data type?
As an example say I upload an image1.jpg, this contains 3 image crops named thumb, featured and main.
How would I display the image created as thumb using Razor?
The following should point you in the right direction. The Image Cropper is a standard Umbraco Datatype so it has some support for accessing the crops, you can find them by crop name:
var mediaItem = Library.MediaById(Model.Thumbnail);
var img = mediaItem.crop.Find("#name", "thumbnail");
if (img != null)
{
<img src="#img.url" />
}
I hope that helps.
I have got this working, not sure it is best practice but does the job for now.
<img src="#Library.Concatenate(mFile.umbracoFile.Split('.')[0], "_thumb.jpg")" />
The above takes the filename of the media item, strips the file extension off and concatenates it to the cropped image name using the Library Helper. In this case the cropped name was thumb, so adding an underscore and the cropped name resolves the generated image.
The cropped images are generated within Umbraco on the server in the following format:
filename - fileextension + underscore + croppedname + fileextension

get base64 in javascript to silverlight image

I have a javascript function that get base64 string then I need to pass this value to a silverlight object within my page to render the base64 as jpeg image
Now I use AJAX to build the image and rerender it on the page but it take alot of time I believe that with silverlight it won't take that much of time
So any resources on this issue?
You can just set the image src to the base64 string, both on tags and in CSS. So you don't have to convert the base64 string, you can just render it in place. This will give you a faster user experience.
Replace the underscores in the following examples with your base64 string:
<img src="data:image/png;base64,______________">
Or, using CSS:
background-image: url(data:image/png;base64,_____________);
If you want to send something from JavaScript to Silverlight (1) to process it (2), and then maybe back from Silverlight to JavaScript (3), check out the below links. When I say "process it", this probably means saving the image and sending back an image URL. But if you want to display it using Silverlight, this is of course unnecessary.
JavaScript/Silverlight Interop (includes passing JS parameter to Silverlight)
C#: Base64 string to Bitmap
Pass parameters from Silverlight to JavaScript

Categories