Image not showing, although data coming successful back from http request (Ionic) - angularjs

I am working on an Ionic project and via json I was able to readout my data in the view. But for some reason my image won't come through.
Here is a screenshot of my console:
As you can see from the picture the data is coming in correctly.
My html code:
<ion-list>
<div ng-repeat="newsItem in newsItems">
<a href="#">
<img ng-src="{{newsItem.picture}}" width="80" height="80">
<p>{{newsItem.name}}</p>
</a>
</div>
</ion-list>
Anyone has an idea why the image is not showing?

ok, first you jsfiddle is broken ! but no biggie, just remove ';' from the first line. Second your json news doesn't have a pictures it's just this ...
{"newsID":"58","name":"Chemicar presentation","idk":"new","kind":"news","picture":"58.jpg","picture1":"","start_time":"1446073201"}
You are binding to {{newsItem.picture}} and as you can see your picture it's there as a 58.jpg but this is not a picture it's just a string of picture name, so that's why it's not showing anything in the html!

(Perhaps I should have put this in a comment; totally going to get flamed)
I wonder if it could be a z-index issue?

Related

Links not working inside featherlight popup

I've built a site with Hugo and using featherlight.js for pop-up lightbox. All working fine when hosted locally. But on the live version I'm having a weird issue where the links inside the pop-up are not working.
A full reproducible example is difficult, but I'll provide the relevant code and perhaps someone can identify what's likely causing the problem or tell me what other info they need.
Relevant code calling featherlight:
<a class="search-icon" href="#" data-featherlight="{{ .link | safeURL }}" > <i class="ti-search"></i> </a>
Where .link is html file compiled from markdown.
If I navigate directly to .link the content shows up fine, and the links in the content are fine, e.g.,:
<p>See more here </p>
But inside the pop-up lightbox, links in the content appear like this:
<p>See more here</p>
i.e., 'here' is outside the </a> tag.
This particular link uses Hugo code:
<p> {{.Params.Link_text}} <a href="{{ .Params.Link | absURL }}" > here </a> </p>
But the same thing occurs for the links written with Markdown.
A featherlight.js bug or something else?
It works after replacing this "https://code.jquery.com/jquery-latest.js" with "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js".

Replace the default block with figure

Currently, i'm buiding my rich text editor with quill and i need to create an embed for images. Before quill, i used to use redactor and i try to move to redactor. But, i already have 2 version of data from redactor before where the users is already uploaded images.
Version 1:
<p>
<img src="http://lorempixel.com/400/200/" data-image="5bb71bdc65465e0675ba" class="img-fluid img-responsive">
</p>
Version 2:
<figure>
<img src="http://lorempixel.com/400/200/" data-image="1bdc65465e0675ba1b2b" class="img-fluid img-responsive">
</figure>
Expected behavior:
I expect to replace the p with figure on initial parsing in quill. So, all the images have same parent figure
Actual behavior
figure is always deleted by default
I tried to register figure with blots/block/embed but i can't check and add the figure if the image doesn't have figure on its parent
Thank you

GTM trigger on image showing

Struggling with the DOM visible/element variables. Below is the code on page:
Below is the code, if either that image shows (failed.png) or the text says "Sorry! Something isn't quite right." I want to fire a trigger. How would I go about this? I'll also have a different trigger if it's successful, which would be a different image.
<div class="page page--result result center">
<img src="/images/fb/failed.png" class="result__img result__img--success"/>
<p>Sorry! Something isn't quite right.</p>
<br/>
Thanks
david

enbedding Youtube link in iframe using angular js

I like to post the video link on my website but that doesnot work
<div ng-repeat="vid in video">
<iframe class="embed-responsive-item" width="250px" height="250px" src="https://www.youtube.com/embed/+{{vid.youtube}}" frameborder="0" allowfullscreen></iframe>
</div>
The above code not working, please help.
You must use the ngSrc attribute as they say in the Angular documentation otherwise your browser tries to fetch the url with "{{vid.youtube}}".
Plus you don't need to add a "+", there isn't any on Youtube urls.
EDIT : I actually had the same problem with iFrames, and I forgot about it : you must tell Angular you "trust" the Url given. Take a look a this post, it's exactly the same problem.

Selenium locator for span loaded with AJAX

I'm new to Selenium IDE and can't find exact answer to my question elsewhere.
I have Login form that loads error message in span tag using AJAX.
Code looks like this:
<dd class="field-error-template atk-form-error">
<i class="ui-icon ui-icon-alert"></i>
<span class="field-error-text">Incorrect login information</span>
</dd>
I used following Selenium code to verify that this span appeared on screen:
waitForElementPresent css=dd.field-error-text span
However it returns false so any other ideas? I don't want to put delay as I don't think it is good practice.
Thanks,
Gita
You got your classes mixed up; the selector should either be this
dd.field-error-template span
Or this
dd span.field-error-text
(or use both classes)

Resources