I'm trying to use data-interchange from Foundation 5 with slim as follows:
= image_tag('', 'data-interchange' => "[#{image_path('umed-image-large.jpg')}, (medium)], [#{image_path('umed-image-small.jpg')}, (small-only)]")
The problem is that it works the first time when loading the page but when clicking on a logo in the nav bar (the url is the same), the image is no more displaed. I observed the generated HTML in the Chrome console when the image is displayed:
<img data-interchange="[/assets/umed-image-large-45e4ffd1823f658bf167972ba4a8cad74797963d9a8906f65a8710d1c7458145.jpg, (medium)], [/assets/umed-image-small-97b7dfa3c6ca88e76b355eece97b723f458ae455f501013d1b0084ce0f5bd953.jpg, (small-only)]" src="/assets/umed-image-large-45e4ffd1823f658bf167972ba4a8cad74797963d9a8906f65a8710d1c7458145.jpg" data-uuid="interchange-j30j01nh0">
And here is the HTML when there is no image:
<img data-interchange="[/assets/umed-image-large-45e4ffd1823f658bf167972ba4a8cad74797963d9a8906f65a8710d1c7458145.jpg, (medium)], [/assets/umed-image-small-97b7dfa3c6ca88e76b355eece97b723f458ae455f501013d1b0084ce0f5bd953.jpg, (small-only)]" src="">
As you see, there is no src data in the latter case. Any idea what is wrong here ? Thank you.
Related
In my Umbraco 7.15.7 I'm displaying images in the Partial Views Macro Files as follow:
figure>
#if (newsItem.HasValue("articleImg"))
{
<img src="#Umbraco.Media(newsItem.articleImg.ToString()).Url" class="img-fluid news-img" alt="#newsItem.Last().photoAlt" />
}
(the reason for the .ToString() is after I switched from Obsolete to Media.Picker2 - so since it's string)
In my Umbraco 11.1 I was struggle to display the images. I tried the following and it didn't display the images, but also didn't throw an error, just didn't display the images:
<img src="#Umbraco.Media(newsItem.Value<IPublishedContent>("articleImg").ToString()).Url()" class="img-fluid" alt="#Imaging_pagesToList.Last().Value("photoAlt")" />
So I tried this one:
<img src="newsItem.Value<IPublishedContent>("articleImg").Url()" class="img-fluid" alt="#newsItem.Value("photoAlt")" />
And this one also doesn't show any image
I also tried this one (the same as above, just with # - #newsItem) , and this throw an error: "Argument 3: cannot convert from 'method group' to 'object?'":
<img src="#newsItem.Value<IPublishedContent>("articleImg").Url()" class="img-fluid" alt="#newsItem.Value("photoAlt")" />
So I tried this one:
var image = newsItem.Value<IPublishedContent>("articleImg");
<img src="#image.Url()" class="img-fluid" alt="#newsItem.Value("photoAlt")" />
And this is finally works! And I don't understand why? (why this works, and why the previous didn't work)
My question are:
Why only the last one works?
Why the first two doesn't work?
Is this is the right way to render images in Umbraco 11.1 ?
In the official documentations of Umbraco (9 and up) they suggest to render images as follow:
var mediaItem = Umbraco.Media(Guid.Parse("55240594-b265-4fc2-b1c1-feffc5cf9571"));
But they hard coding the Guid in their examples.
Not sure how to get the Guid for each node.
Please advise.
Thanks.
Please check what property editor is used; maybe it's a collection and not a single media. In that case, you will need something like:
newsItem.Value<IEnumarable<IPublishedContent>>("articleImg").First().Url()
------------ORIGINAL QUESTION------------------
In my Splash Script, I am trying to use "splash:go" on a new url that is based on the "src" attribute of an "img" tag. How can I access this "src" relative url and join it to a start_url?
For example, imagine that the img element has the following contents:
<img id="ImageViewer1_docImage" onload="BlockerResize('ImageViewer1_ContentBlocker1','ImageViewer1_WaterMarkImage');" src="ACSResource.axd?SCTTYPE=ENCRYPTED&SCTKEY=gMYed5OWqcT9I1Y2fM85DvB48X5U1DQ5mOUiJoUH4rioyau0nJdxt0PHFfGVTMiUsork/YD+Cw0F6ZzcviP4sG09xrqWM8/zJlyEeVRFkKXVnkyHYWgwNJzCSUE4Kh4yCsqw6mCuIxWxPj6BAI7Hbw==&CNTWIDTH=849&CNTHEIGHT=684&FITTYPE=Height&ZOOM=1" alt="Please wait" style="border-width:0px;cursor: url(images/Cursors/hmove.cur); z-index: 1000">
Here I am trying to extract the src attribute and add it to start_url:
https://i2a.uslandrecords.com/ME/Cumberland/D/
I want all of this inside the Splash script. I need it to be done inside of Splash because otherwise I lose my security/encryption or something--it renders "Bad Data" instead of the new webpage. Do you have any recommendations?
------------UPDATE------------------
So I managed to obtain the url I needed from the src attribute using the following code:
var = splash:evaljs("document.getElementById('ImageViewer1_docImage').src;")
splash:go(var)
However, the problem is that this is producing a error message. All I find in the snapshot is a white page with the following message:
Failed loading page (Frame load interrupted by policy change)
https://i2a.uslandrecords.com/ME/Cumberland/D/ACSResource.axd?SCTTYPE=ENCRYPTED&SCTKEY=gMYed5OWqcSvEWOJA6wGVmb642s2oZHqkYmT6VTpORTzMY7CgvDU5jsjJG/xp0X3eQ9BiDnbaTdAmISeLkC3hyjxGjcSnXOKgGDa8cI2fniY0ILT+NqvQToMGIB+/X3ZIs7Q+D4ppTSZGYZ2L4M/
Webkit error #102
Any idea why?
The image src attribute is exactly the URL you need to access or as stated by the question title you need to append it to some other URL parts?
If that is the case, you can do it by '..'
Ex.: splash:go(base_url..var) -- concatenation
ISSUE RESOLVED:
Here is the solution. The GET request was breaking down because it didn't know how to render the image in html given the webkit settings. If you execute the GET request without rendering the page, the response.body has the image.
CODE:
local response = splash:http_get(var)
return {
body = response.body
}
In view I want to show image which is store in view folder named Errorpage.png. Now, I want to show that image in Error.cshtml view file.
Here is my code
<img src="~/Views/Errorpage.png" alt="error">
Now , this code is not working and showing error alt in the place of image. While the path is perfectly right, but surprised that why it is not working.
While I tried by fetch the online image and that is work.
Here is the code
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/anton-ploom.jpg"
alt="A danseur in brisé (a leap with the legs together) on a blue background">
Now, I am confused that this second code is working properly while the first code is not working.
The syntax is same both of the code.
Thank You.
Try with this way:
can you please put your image in image folder outside Views folder
that can work
or
<img alt="error" src="#Url.Content("/Views/Errorpage.png")" />
if that doesn't work you could try with this way:
<img alt="error" src="/Views/Errorpage.png" />
or there is another solution if all are fails :
<img alt="error" src="<%= Url.Content("~/Views/Errorpage.png") %>" />
in visual studio, the image works from ~/contents/*.jpeg directory.
if you will put it in any other directory it will not work.
try this
<img src="#Url.Content("~/Views/Errorpage.png")" alt="error"/>
I have (java) code that generates PNG images from a custom infrared camera from time to time all the same size and, at the moment, just saves them outside the server space. They all have the same name and the most recent overwrites the previous one.
I can send a message to my dart code in the browser that an image is available for automatic loading for display in an image element.
Should I create an image folder and save them there?
How would the browser request and display the image? I'm using port 4955 for html.
I'm new at dart, html etc.
<-- edit -->
Will this allow me to change the DOM?
HTML
<div id='image-div'>
<img alt='' id='image' src='resources/200C-B12.png'
height='480' width='640'>
</div>
CSS
#image {
}
Dart
ImageElement imageElement = querySelector('#image');
I think I want to change the above ImageElement to this the below but don't know how.
"<img alt='' id='image' src='imageDisplay/myimage.png'
height='480' width='640'>";
<-- edit -->
I have tried the suggested methods to request the image but none works. The most recent attempt is below. I have a statement that writes to a log-file in the Dart server code that handles HTTP requests and, while there are log entries made when the page page is loaded there are none when I try to request a different image. The client page does receive the correct path to the image so the problem is that I still don't grok the correct procedure.
HTML currently - want to replace src ... to src='displayImage/some_image.png'
<div id='img-box'>
<div id='image-div'>
<div id='imgAnchor'>
<img alt='' id='image' src='resources/fi_12_demo.png'
height='480' width='640'>
</div>
</div>
</div>
Dart code fragment:
void displayNewImage(imagename) {
updateLog('display image = $imagename'); // imagename is correct
var anchor = querySelector('#imgAnchor');
anchor.children.clear;
anchor.append(new ImageElement()
..innerHtml="<img alt='' id='image' src='$imagename' height='480px' width='640px'>");
}
I conclude that no request is being sent from the client to my Dart server.
I think adding an <img src="http://yourserver.yourdomain.com:4955/somefolder/someimg.png"> to your HTML dynamically (by Dart code) should do. If the updated images have the same name you might run into caching issues (the browser doesn't load the image from the server but loades it from the cache instead). It might be easier to store each image with a new name.
I have a link like so
= link_to "https://twitter.com/share", class: "twitter-share-button", data: { url: "https://google.com", text: hack.body, via: "GhettoLifeHack_", hashtags: "ghettolifehack" } do
= image_tag "Tweet", alt: "Social Twitter tweet button"
and no matter how much I change the data-url value, the pre-tweet confirmation page always prepopulates the tweet form field with the url of the referring page, not the one I specified. It also ignores my custom data-text as well.
Why is this happening?
I also have this minified script
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
that I got from here https://about.twitter.com/resources/buttons#tweet
Removing that script doesn't seem to change anything.
edit: upon trying using :'data-url' attributes directly, the output html is the same.
I am testing hardcoded strings and dynamically generated urls at the same time. The first is the dynamic one.
<a class="twitter-share-button" href="https://twitter.com/share" data-via="GhettoLifeHack_" data-url="http://localhost:3000/hacks/1" data-text="asdf comment body" data-hashtags="ghettolifehack">
<img src="/images/Tweet" alt="Tweet" title=""></img>
</a>
The second is the hard coded strings
<a class="twitter-share-button" href="https://twitter.com/share" data-via="GhettoLifeHack_" data-url="httpL//google.com" data-text="custom text" data-hashtags="ghettolifehack">
<img src="/images/Tweet" alt="Tweet" title=""></img>
</a>
I've tested on development and in production. Both have the same behavior of pre-populating the tweet form with the referring url, rather than the specified url and text.
This works in Chrome for me but not in Firefox 32
The code provided by you is perfectly fine and should work as expected.
Many site issues can be caused by corrupt cookies or cache. Try to clear both cookies and the cache. I would suggest you to look into the following link to see why it is not working in firefox
The issue was specific to firefox browser. I'm not sure what addon or setting is causing the conflicts, but it is working perfectly find in chrome, including the popup window.