How can I create a dynamic url to display an image?
I am creating a web page that lists search results of products and their associated images.
I tried using Url.Content, but it does not format the url correctly.
Code I created:
<img src="../../Images/<%: product.PicFileName %>" alt="photo" />
Html that was output:
<img src=".. ..="" Images="" nopic.jpg="" alt="photo" ="">
I also tried creating a helper method but it created the exact same output:
public static string GetPicUrl(string picFileName)
{
string picUrl = "../../" + picFileName;
return picUrl;
}
Just tried this:
<img src="<%: Url.Content("/Images/" + filename) %>" alt="foo" />
where filename = "foo.jpg" and it gives me
<img src="/Images/foo.jpg" alt="foo"/> which links to http://hostname/Images/foo.jpg
Please let us know what format you want the Url in if this isn't what you had in mind and I will try to help you some more.
Related
In Umbraco 8 the following code worked:
#using Umbraco.Core.PropertyEditors.ValueConverters;
#{
Layout = "Main.cshtml";
var imgCropper = item.Value<ImageCropperValue>("homeImage");
var thumbUrl = imgCropper.Src + img.Cropper.GetCropUrl("Thumb");
}
In Umbraco 9 it gives me
The type or namespace name 'PropertyEditors' does not exist in the
namespace 'Umbraco.Core'
This line from up to date documentation does not work too:
<img src="#Url.GetCropUrl(Model.HomeImage, "thumb", true)" />
Giving me
'IUrlHelper' does not contain a definition for 'GetCropUrl' and the
best extension method overload
'FriendlyImageCropperTemplateExtensions.GetCropUrl(IPublishedContent,
ImageCropperValue, string, UrlMode)' requires a receiver of type
'IPublishedContent'
What is the correct way to display a thumbnail from image cropper in Umbraco 9 if image cropper fields is named 'homeImage' and it has a thumbnail named 'thumb'?
Found the solution 2 minutes after posting the question (d'oh). The command must be as follows:
<img src="#Url.GetCropUrl(Model.HomeImage, "thumb")" />
Please note there is no last parameter (true), that's what caused the problem.
I store images in the database and can retrieve them in a view thanks to a Get Method from my Img Controller that returns a File([] fileContents, string contentType).
No problem to display it in a View with :
<img src="#Url.Action("Get", "Img", new { id = Model.ImgId})"
On the contrary, when I try to pass the URL of an image within an inline background-image: url, it does not work.
1) I tried this in the View using the same Img Controller to get the image :
<div style="background-image: url('#Url.Action("Get", "Img", new { id = Model.ImgId})')"></div>
Which renders this HTML but does not display the image :
<div class="imageBox" style="background-image: url('/Img/Get/2')"></div>
2) I tried this in the User Controller :
string formatWithoutPoint = user.Img.Format.Substring(1);
string imageBase64Data = Convert.ToBase64String(user.Img.Data);
string imageDataURL = string.Format("data:image/" + formatWithoutPoint + ";base64,{0}", imageBase64Data);
ViewBag.ImgSrc = imageDataURL;
And this in the View :
<div class="img" style="background-image: url('#ViewBag.ImgSrc')"></div>
which renders this HTML but does not display the image :
<div style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAU...')"></div>
I don't understand... have you any idea?
I know someone had the same problem but he did not share how he finally managed to solve it : ASP MVC: Upload Image from Database as Full Background CSS
Thanks in advance
I am such an idiot !
I was so focused on the background-image: url ('...') because the color syntax of visual studio would not get right that I completely forgot to give a size to that damn div !
Both methods are actually working well and displaying the image.
Sorry about that
I'm trying to get Angular Dart to display a link in a tag from an HTML string.
At first, I tried to just set the inner HTML of the container to be the HTML string, but that didn't work, so I then I tried to use Dart's DomSanitizationService class, but that also doesn't seem to work.
What I have so far is
Dart:
class SomeComponent {
final DomSanitizationService sanitizer;
SafeUrl some_url;
SomeComponent(this.sanitizer) {
some_url = this.sanitizer.bypassSecurityTrustUrl('https://www.google.com');
}
String html_string = '''
<a [href]="some_url">Hi</a>
''';
String get Text => html_string;
}
HTML:
<div [innerHTML]="Text"></div>
The error I'm getting is Removing disallowed attribute <A [href]="some_url">. The text Hi seems to show, but there is no link anymore.
Just as you bypassed URL sanitanization, you have to bypass HTML sanitanization as well using bypassSecurityTrustHtml to return markup.
https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustHtml
In the website I'm creating, I'm trying to store a URL to an uploaded image into my model and calling to it in the view. So when I type out the file path in the source for the HTML, it works fine.
<dd><img src="~/uploads/image.jpg" alt="ASP.NET" style="width:350px;height:260px" />
</dd>
But if I try to call from the model, the URL gets messed up.
#string imagePath = "~/uploads/" + Model.Picture;
<dd><img src=#imagePath alt="ASP.NET" style="width:350px;height:260px" />
</dd>
That code links to "http://localhost:60847/Controller/Details/~/uploads/image.jpg" . Could someone explain to me why it's working differently? Thank you.
You are missing quotes around the src property value. Also make sure you use the Url.Content helper method to get the correct path. You may pass "~" to this method to get the correct path to your app root.
#{ string imagePath = Url.Content("~/uploads/" + Model.Picture); };
<img src="#imagePath" alt="ASP.NET" style="width:350px;height:260px" />
Or even a single liner without the variable
<img src="#Url.Content("~/uploads/" + Model.Picture)" />
I am using HtmlAgilityPack to parse data for a Windows Phone 8 app. I have managed four nodes but I am having difficulties on the final one.
Game newGame = new Game();
newGame.Title = div.SelectSingleNode(".//section//h3").InnerText.Trim();
newGame.Cover = div.SelectSingleNode(".//section//img").Attributes["src"].Value;
newGame.Summary = div.SelectSingleNode(".//section//p").InnerText.Trim();
newGame.StoreLink = div.SelectSingleNode(".//img[#class= 'Store']").Attributes["src"].Value;
newGame.Logo = div.SelectSingleNode(".//div[#class= 'text-col'").FirstChild.Attributes["src"].Value;
That last piece of code is the one I am having problems with. The HTML on the website looks like this (simplified with the data I need)
<div id= "ContentBlockList" class="tier ">
<section>
<div class="left-side"><img src="newGame.Cover"></div>
<div class="text-col">
<img src="newGame.Logo http://url.png" />
<h3>newGame.Title</h3>
<p>new.Game.Summary</p>
<img src="newGame.StoreLink" class="Store" />
</div>
</div>
</section>
As you can see, I need to parse two images from this block of HTML. This code seems to take the first img src and uses it correctly for the game cover...
newGame.Cover = div.SelectSingleNode(".//section//img").Attributes["src"].Value;
However, I'm not sure how to get the second img src to retrieve the store Logo. Any ideas?
newGame.Cover = div.SelectSingleNode(".//img[2]").Attributes["src"].Value;
You didn't post the entire thing but, this should do the trick.
You can try this way :
newGame.Cover = div.SelectSingleNode("(.//img)[2]")
.GetAttributeValue("src", "");
GetAttributeValue() is preferable over Attributes["..."].Value because, while the latter throws exception, the former approach returns the 2nd parameter (empty string in the example above) when the attribute is not found.
Side note : your HTML markup is invalid as posted (some elements are not closed, <section> for example). That may cause confusion.