I'm using AngularJS to fill in a data-src attribute in an img tag:
<img src="/img/lazyload.gif" data-src="{{product.image}}" alt="{{product.alt}}" class="ng-lazy-load">
In firefox this results in:
<img src="{{product.image}}" data-src="{{product.image}}" alt="the correct Alt tag" class="ng-lazy-load">
In Chrome and IE this works as expected:
<img src="/img/image.png" data-src="/img/image.png" alt="the correct Alt tag" class="ng-lazy-load">
So in Firefox, the alt attribute is filled in correctly by AngularJS but the data-src attribute isn't. I tried changing the data-src to data-source and then the result is as expected, but the lazy load library we use JQuery Unveil does not support renaming attributes.
Does anyone have suggestion how to work around this issue?
Note to self: Make a bug report to AngularJS.
Kind Regards
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.
In Canada, we have a new law that you must have ALT tags for images but when my page loads, the fotorama plug-in seems to remove them from the code. Is there a workaround or something that I can do?
I have been in a same situation like you are now.
Fotorama seems to discard and totally remove alt and title tags as not necessary in its purposes.
You need to raise a bug in its bug tracking system so that in its future releases it may include this tag particularly and all the other HTML standard tags that blindfully it discards.
In order to show the Alt and Title in image use the image with in DIV.
Use :
<div><img src="http://www.example.com/image.png" alt="My Alt" title="My Title"/></div>
Instead of :
<img src="http://www.example.com/image.png" alt="My Alt" title="My Title"/>
Just want to let you(other) know. Issue with stripping "Alt", "Title" attributes have been fixed (I really like this dll, and this issue used to freak me out), I asked owner to pull fix.
My angular page which I reduced to a to a minimal example here I tried three different ways to show the same img (just a red rectangle) in the "img"-Page:
The first image uses the XML-Style Parameter "ng:src" to specify the file location.
The second image uses the "ng-"-Prefix style
The third image just uses the src attribute (which I thought will probably not work well (the documentation here says that as well).
In Firefox all three images are displayed just fine.
In Opera the page shows only the later two images.
Chromium refuses to even load the page at all (it says "Error: An invalid or illegal string was specified." on the console). (It works if I remove the XML-Style img).
Why is this happening? Since I believe in XML my preference would be to get the XML-Style Parameter to work in all browsers. Note that I don't care about Internet Explorer.
Archive with my (broken) project: http://cipher-code.de/tmp/angular.zip
The XHTML spec outlines this algorithm that Chrome does not implement fully. Chrome returns the error you observe when the XML is not well formed, which is true when the following step in the algorithm is not followed:
If there is a context element, feed the parser just created the string corresponding to the start tag of that element, declaring all the namespace prefixes that are in scope on that element in the DOM, as well as declaring the default namespace (if any) that is in scope on that element in the DOM.
The result of not following this step means you have to set xmlns:ng on the root element of the fragment you are appending (or technically, any element or parent thereof that uses the ng namespace)
Edit after further discussion in comments: element.setAttribute on Opera doesn't do anything if the attribute doesn't exist. AngularJS has a compatibility fix for this for Internet Explorer. Enabling this fix for Opera solves the issue on Opera as well. A bug is issued with AngularJS here. Internet Explorer and Opera seem to misinterpret the spec on this.
Chrome appears to be quite strict when injecting fragments of XML into an XML document, with regards to namespaces. Your partial of images
<section>
<h1>Img</h1>
<p>With ng:src: <img ng:src="{{img}}" /></p>
<p>With ng-src: <img ng-src="{{img}}" /></p>
<p>With src: <img src="{{img}}" /></p>
<p>As link: Go to img</p>
</section>
is using the ng namespace, but it's not declared. The following fixes it in Chrome
<section xmlns:ng="http://angularjs.org">
<h1>Img</h1>
<p>With ng:src: <img ng:src="{{img}}" /></p>
<p>With ng-src: <img ng-src="{{img}}" /></p>
<p>With src: <img src="{{img}}" /></p>
<p>As link: Go to img</p>
</section>
Alas not sure why it then doesn't work in Opera.
Edit:
After a bit more testing, it looks like Opera can't quite cope with attributes src and ng:src on the same element. A solution is to roll your own ngSrc directive, called something like myImgsrc,
myModule.directive('myImgsrc', function() {
return {
link: function(scope, element, attrs) {
attrs.$observe('myImgsrc', function(src) {
attrs.$set('src', src);
});
}
}
});
Used as:
<img my:imgsrc="{{img}}" />
(Remembering to properly declare the namespace xmlns:my="http://mydomain.com" in both the document and the partial, so as not to break Chrome)
I am using DocPad for generating static content for my blog. Lately, I have been blogging on AngularJS.
I seem to be having an issue with how DocPad is generating attributes for some tags like img, especially for two use cases.
First, I want to demonstrate how you should use the ng-src tag and NOT the src tag in an image. I demonstrate this by showing 404 errors on page load. So I have the following HTML in my markdown file
<td><img src="{{album.image}}" alt="{{album.album}} Cover Image" ></td>
to demonstrate this. However, during the DocPad processing it prepends the local directory to create
<td><img src="/2014/01/angularjs-lou-reed/{{album.image}}" alt="{{album.album}} Cover Image" ></td>
When the AngularJS engine processes the page, I get 404 errors on the images.
The second issue is when I use the ng-src attribute. During processing, I am guessing, that since the src attribute of the image tag is missing it adds a src attribute into the generated HTML.
So the HTML
<td><img ng-src="{{album.image}}" alt="{{album.album}} Cover Image"></td>
gets generated into
<td><img ng-src="{{album.image}}" alt="{{album.album}} Cover Image" src="/2014/01/angularjs-lou-reed/undefined"></td>
I am pretty new to DocPad and green with NodeJS. Any ideas where to look to resolve this? I think what I would like to do is if certain attributes contain AngularJS of {{ }} to skip the the normal processing.
You can see the generated page at
http://www.jptacek.com/2014/01/angularjs-lou-reed/
When accessing my website built with AngularJS 1.2.0rc1 via the InAppBrowser within PhoneGap 2.7.0 on IOS, the contents of an ng-show flicker on the screen.
<form method="POST" action="" name="manualEntryForm" class="form-inline">
<div ng-show="showErrors && !manualEntryForm.$valid" class="errorMsg ng-hide">
One or more of the following fields are required:
<span ng-show="manualEntryForm.month.$error.required || manualEntryForm.day.$error.required || manualEntryForm.year.$error.required" class="ng-hide">Date needs to be present</span>
...
</div>
...
</form>
It doesn't matter if I default showErrors to false or test it more rigorously (showErrors === true), that block of error content will display and also show the actual error message associated (Date needs to be present).
I'm stumped as to how to address this. Should we not be using the Angular Form Validation within that ng-show? Why is it only causing an issue on IOS/Phonegap InAppBrowser?
I had the same problem. ng-cloak didn't solve the problem, so what solved the issue for me was to add
class="ng-hide"
to each element with the ng-show attribute, and now it doesn't flash the content on ios.
Try using ng-cloak to hide the element during compilation:
http://docs.angularjs.org/api/ng.directive:ngCloak
It might be showing up before the AngularJS compiler has had time to run. And it might only be showing in iOS/Phonegap because the webkit browser in UIWebView is nowhere near as fast as Mobile Safari, let alone a desktop browser.
As a workaround, I ended up removing ng-show, and instead adding an ng-class="{hidden: myCondition}", then defining .hidden { display: none; } in CSS. This removed the flashing.