I am trying to display each image from each post from medium's rss feed, without using JQuery, but only javascript or angular, in HTML.
Is it possible to get the image from the RSS feed? I am receiving the title, the date it was created at and the link.
I am working with Ionic2.
entries: any = null;
image: any = null;
In my constructor:
Feed.load('https://medium.com/feed/#jaymelone', (err, rss) => {
if (err) {
console.log(err);
}
else {
this.entries = rss.items;
this.image = this.entries.find('img').eq(0).attr('src');
}
console.log("RSS function - entries:", this.entries);
console.log("RSS function - image: ", this.image);
});
In my HTML
<div class="post" *ngFor="let entry of entries">
<div class="inner">
<img class="img" [src]="entry.image">
<p class="title">{{entry.title}}</p>
</div>
</div>
But I receive:
<img class="img" src="undefined">
And:
TypeError: Array.prototype.find callback must be a function
Assuming that your console.log call is outputting the image name correctly, everything looks in order except you need to use ng-src instead of src, like this:
<img class="img" ng-src="{{entry.image}}">
Try entry.image.url.
Example:
<img class="img" [src]="entry.image.url">
Related
I am fetching data (html content) from an API and setting it as an dangerioslyinnerhtml in ReactJS. I want to make an image popup using fancyapps/UI and in order to do that, I have to replace this,
<div className="img-parent">
<img className='fancybox' src="" alt="" />
</div>
with this
<Fancybox options={{ infinite: false }}>
<button
data-fancybox="gallery"
data-src={require("source-of-image")}
className="button button--secondary">
<img className='fancybox' src={require("source-of-image")} alt="" />
</button>
</Fancybox>
Any ideas with .replaceAll function in JS?
I tried to explain my problem in details and I want some experienced people to help.
An approach would be to parse the response you are getting as html as explained here:
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(txt, 'text/html');
and then you get the data you need to display your FancyBox components like this:
const images = [];
htmlDoc.querySelectorAll(".img-parent img").forEach(img=>{
images.push({src:img.src, alt:img.alt})
});
At the moment I am trying to get value in src= of
<div class="page-break no-gaps">
<img id="image-0" src="https://foo.bar/image.jpg" class="wp-image" alt="Title">
</div>
with the following code:
getImageSrc(imageObj: Cheerio | undefined): string {
let image
image = imageObj?.attr('src')
console.log(image)
}
selector code:
chapterDetailsSelector = 'div.page-break > img'
However all I am getting is undefined
EDITED - add more context
View source html != what is fetched by cheerio
Seems like the image url is in attr('data-cfsrc') rather than attr('data') when fetched with cheerio
I need add the random int or unix timestamp to all img src="" whit class='avatar'
<img src="a.png" alt="" class="avatar">
<img src="b.png" alt="" class="avatar">
<img src="c.png" alt="" class="avatar">
I know I can use php to set it
<img src="a.png?<?php echo time();?>" alt="" class="avatar">
But I want to try Js to do that.
my code for try, but not work
<script>
var now = Date.now()
var img_src = document.querySelector(".avatar").src;
document.querySelector(".avatar").src = img_src+"?"+now;).
</script>
why add a random int or unix timestamp to the end of img src?
Because I using a CDN
when the user update some photos can't see the new photo on real time.
I prefer use JS don use server side.
the file name is fixed forever, can't change.
any other suggest?
You can get all the images with the querySelectorAll method on the document object.
const images = document.querySelectorAll(".avatar");
After that you can change the src attribute for each of them.
images.forEach((image) => {
image.src = image.src + "?random=" + Date.now();
});
Below is my Python and Html code:-
Python:
#app.get('/', status_code=200)
async def upload_file(file: UploadFile = File(...)):
error_img = Image.open('templates/crying.gif')
byte_io = BytesIO()
error_img.save(byte_io, 'png')
byte_io.seek(0)
return StreamingResponse(byte_io, media_type='image/gif')
HTML:
<img src="" id="img-maze" alt="this is photo" style="display: none;" />
function goBuster(file) {
fetch('/', {
method: 'GET',
body: data
})
.then(response => response.blob())
.then(image => {
var outside = URL.createObjectURL(image);
var mazeimg = document.getElementById("img-maze");
mazeimg.onload = () => {
URL.revokeObjectURL(mazeimg.src);
}
mazeimg.setAttribute('src', outside);
mazeimg.setAttribute('style', 'display:inline-block');
})
}
The image is not animating, I checked the generated html and found:
<img src="blob:http://127.0.0.1:8000/ee2bda53-92ac-466f-afa5-e6e34fa3d341" id="img-maze" alt="this is photo" style="display:inline-block">
So the img src is using blob, I guess this is the reason why the gif is not animating, but I have no idea how to fix it.
Update 1
Now I have updated my code to:
with open('templates/crying.gif', 'rb') as f:
img_raw = f.read()
byte_io = BytesIO()
byte_io.write(img_raw)
byte_io.seek(0)
return StreamingResponse(byte_io, media_type='image/gif')
The generated HTML looks same:
<img src="blob:http://127.0.0.1:8000/c3ad0683-3971-4444-bf20-2c9cd5eedc3d" id="img-maze" alt="this is maze photo" style="display:inline-block">
but it gets worse, the image is not even showing up.
error_img.save(byte_io, 'png')
You're converting this image to png. PNG doesn't support animation.
I think you can use:
#app.get('/', status_code=200)
async def upload_file(file: UploadFile = File(...)):
with open('templates/crying.gif', 'rb') as f:
img_raw = f.read()
byte_io = BytesIO(img_raw)
return StreamingResponse(byte_io, media_type='image/gif')
(Posted solution on behalf of the question author, in order to post it in the answer space).
I fixed the problem by:
using the code provided by #VadSim,
change wb to rb
Notice: if you ran the program and then changed wb to rb, the code would have destroyed the original gif image to be a 0 bytes image. This is why it was not working at first.
Now, I have the gif working in html :)
i'm implementing this tenor API into my Site....the thing is that with this function I retrieve a single value single gif...How do I foreach() all of them?
How would need to be the html structure and the javascript loop
JAVASCRIPT/ JSON
function grab_data(anon_id)
{
// set the apikey and limit
var apikey = "*************";
var lmt = 8;
.....
// callback for trending top 10 GIFs
function tenorCallback_trending(responsetext)
{
// parse the json response
var response_objects = JSON.parse(responsetext);
top_10_gifs = response_objects["results"];
// load the GIFs -- for our example we will load the first GIFs preview size (nanogif) and share size (tinygif)
document.getElementById("preview_gif").src = top_10_gifs[1]["media"][0]["nanogif"]["url"];
document.getElementById("share_gif").src = top_10_gifs[6]["media"][0]["tinygif"]["url"];
return;
}
I would have this top_10_gifs variable loaded of content...how do I foreach it?
HTML
<h2 class="title">GIF loaded - preview image</h2>
<div class="container">
<img id="preview_gif" src="" alt="" style="">
</div>
<h2 class="title">GIF loaded - share image</h2>
<div class="container">
<img id="share_gif" src="" alt="" style="">
</div>
Depends on what exactly you're trying to do (which you haven't explained), but something like
response_objects.results.forEach((gifObj, i) => {
if (i >= 8) return;
// do something with each gifObj
document.querySelector('.container')
.appendChild(document.createElement('img'))
.src = gifObj.media[0].tinygif.url;
});
to iterate over all of them.