In my ionic app, I need to load icons using ng-src. Depending on the format of the document, corresponding icon needs to be displayed.
I was trying to do something like
<img ng-src="{{format === 'docx' ? '../img/Word-icon.png' : '../img/PDF-icon.png')}}">
If the format is docx (I have verified that format value is coming correctly), then display Word-icon.png. For everything else display PDF-icon.png.
This is not working. In fact the page stops loading when I do this. It does not throw an error in the browser console but also does not load the page. Icons are stored in the img directory inside the www folder in the ionic app.
You had unnecessary ) at the end of expression.
<img ng-src="{{format === 'docx' ? '../img/Word-icon.png' : '../img/PDF-icon.png'}}">
Related
I use next/image to render images on the site and set the alt tag appropriately. The images I use originate from a CDN. I have a NextJS-based repository. The issue is that, despite the fact that the image is rendering correctly, whenever I check my site's Google cache and switch to the text-only version, Google attempts to replace the image with the text specified in the alt attribute, which is somehow repeating itself. As a result, instead of displaying "Some Image ALT," Google displays "Some Image ALTSome Image ALT."
Here's my implementation for reference:
<div className="videoCard__image">
<Image
src={bannerUrl}
alt={titleLabel}
layout="responsive"
width={123.6}
height={120}
className="videoCard__image--banner"
priority={loadPriority}
sizes="33vw"
quality={80}
/>
<PlayCircleOutline className="videoCard__image--play-icon" />
</div>
Rendered image HTML from next/image ->
Rendered image HTML from next/image
Google cache text only version ->
Google cache text only version
Expectation: ALT attributte text to occur to once instead of twice.
What is an iframe's page source that get return by getPageSource() after we switch to that iframe? After iframe is located and switch to, what is the first step web driver do to populate iframe's page source?
Sometimes iframe can contains different things in their src attributes
like image ("image.png"), video (video.wmv) or html (web.html) etc
or just urls such as "https://iframe-source.com"
Some do not even have src attributes (like src="" or no src attribute field)
In all three cases, what will getPageSource() return?
It looks like getPageSource() only return html document.
Quoted from doc,
"The Get Page Source command returns a string serialization of the DOM of the current browsing context active document."
How is it possbile that getPageSource() can return anything when people use video,image etc. and src="", or even missing src attributes in their iframes?
I am using cordova-plugin-photo-library to show gallery images in my app. I have used their photoLibrary.getLibrary() method to get the image. That methods returns two type of url:-
photoURL(ex:- cdvphotolibrary://photo?photoId=ADB24867-0CCB-4207-923A-DC9D44233434%2FL0%2F001)
filePath(Ex:- /var/mobile/Media/DCIM/100APPLE/IMG_0652.JPG)
I have tried to show image using either of those path. I am able to show the images using filePath but could not show the image using photoURL. All images does not return filePath. Could anyone can help me to show images using photoURL?
As per their doc we can show directly using photoURL all we have to use imgSrcSanitizationWhitelist(). I have tried but it's not working.
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.
Hi Um using angular for the first time to bind data to an img tag
Um using
<img data-ng-src="{{img.filePath}}" alt="{{img.vehicleId}}" style="width:10%" />
to show an image and the value of img.filePath as follows but it wont show up
D:\Country\Province\City\Images\A0001\2676199\aaaaaaaa-5a59-4bfb-b1ba-0faff297b7b1.jpg
There are no compile errors or any other errors in the code. Image is available in correct path.
Why is it not working ? Thank you in advance
From your index.html(main html from where you load all your js) track that file location.
if your index.html is in "D:\Country\"
then in ng-src ="Province/City/ImagesA0001/2676199/aaaaaaaa-5a59-4bfb-b1ba-0faff297b7b1.jpg"