Kevin Powell - Community•6mo ago

Api image link how to use?

Hello, This site https://www.dre.cx/ api give this image link: https://static.wikia.nocookie.net/dragonball/images/4/42/AboSGAHFR.png/revision/latest/scale-to-width-down/350?cb=20100225121539 How can I use this link as image on my website?

60 Replies

snxxwyy•6mo ago

You’d put the link it gave you inside of src in an image tag. e.g.

<img src="https://static.wikia.nocookie.net/dragonball/images/4/42/AboSGAHFR.png/revision/latest/scale-to-width-down/350?cb=20100225121539" alt="alt text here" />

<img src="https://static.wikia.nocookie.net/dragonball/images/4/42/AboSGAHFR.png/revision/latest/scale-to-width-down/350?cb=20100225121539" alt="alt text here" />

lanszelotOP•6mo ago

this is not working I have to delete the end till the ".png" only that time working as image src but because this is api I cannot delete

snxxwyy•6mo ago

hm, i've never encountered this issue before so i might not be of use, sorry, perhaps someone else will be able to help

lanszelotOP•6mo ago

here you can see: https://codepen.io/lanszelot/pen/dyBozrK

Darth Vader

CodePen

dyBozrK

...

snxxwyy•6mo ago

what's the reason you can't remove the end part up to .png? if you're simply looking to use this one image, i don't see any harm in doing so? Unless you're fetching the data from the api and implementing the link through js, in which case i'm sure you can slice off the unnecessary text?

lanszelotOP•6mo ago

This is api, you request the link. There are more than 1500 links .....

snxxwyy•6mo ago

could you not store the links in an array or perhaps better a file and use for each to filter out the text you don't want?

lanszelotOP•6mo ago

store all links make the site extremly slow. about 1 minutes load time every time

snxxwyy•6mo ago

i'm pretty sure you can cap the amount of data fetched no?

lanszelotOP•6mo ago

ok, but how? this was my question, how can I use that link as an image on my website?

snxxwyy•6mo ago

i'm not sure why the full link doesn't work myself unfortunately, so i don't think i can help here, sorry

lanszelotOP•6mo ago

did you watched my codepen link?

snxxwyy•6mo ago

yes i've looked at it but it's what i've already suggested, if i can't understand why the link isn't working then i really can't be of use unfortunately, perhaps it's something to do with the api site

lanszelotOP•6mo ago

Here is the full api request: https://codepen.io/lanszelot/pen/dyBozrK

missymae•6mo ago

It's like @snxxwyy said, you can use a pattern to remove the part of the links you don't need. For example in your codepen, change to

js 
document.getElementById("lista").innerHTML = `<img src="`+charNames[1].image[0].default.split('png')[0]+'png'+`">`;

js 
document.getElementById("lista").innerHTML = `<img src="`+charNames[1].image[0].default.split('png')[0]+'png'+`">`;

and the image appears. You can use RegEx or make a cleaner method to do the same thing.

MarkBoots•6mo ago

const url = "https://static.wikia.nocookie.net/dragonball/images/4/42/AboSGAHFR.png/revision/latest/scale-to-width-down/350?cb=20100225121539";
const cleanedUrl = url.replace(/(\.png).*/, '$1');

console.log(cleanedUrl)
// "https://static.wikia.nocookie.net/dragonball/images/4/42/AboSGAHFR.png"

const url = "https://static.wikia.nocookie.net/dragonball/images/4/42/AboSGAHFR.png/revision/latest/scale-to-width-down/350?cb=20100225121539";
const cleanedUrl = url.replace(/(\.png).*/, '$1');

console.log(cleanedUrl)
// "https://static.wikia.nocookie.net/dragonball/images/4/42/AboSGAHFR.png"

ἔρως•6mo ago

this is a codepen issue copy-paste your code into google, in a console (but replace document.getElementById("lista") with document.body)

ἔρως•6mo ago

you will see that the image loads normally

ἔρως•6mo ago

by the way, instead of setting the inner html, create an actual element:

let img = document.createElement('img');
img.src = charNames[1].image[0].default;
document.body.appendChild(img);

let img = document.createElement('img');
img.src = charNames[1].image[0].default;
document.body.appendChild(img);

lanszelotOP•6mo ago

First of all thanks for help. These are not good solutions. There are png, PNG, jpg, JPG, files It is not codepen issue.

MarkBoots•6mo ago

i never checked it myself, maybe you know. is there a noticable difference (or caviats) in using the Image() constructor

const newImage = new Image();
newImage.src = "someImg.jpg";

const newImage = new Image();
newImage.src = "someImg.jpg";

then you can also use the onload functions etc...

lanszelotOP•6mo ago

Please watch the codepen link after answer This is an api request. The link is not "someImage.jpg"

ἔρως•6mo ago

it is a codepen issue: the image doesn't load in iframes

lanszelotOP•6mo ago

Please do not write fake Copy paste and try it on your machine Not a codepen issue

ἔρως•6mo ago

here's evidence that it works

ἔρως•6mo ago

try it yourself

a.html

MarkBoots•6mo ago

https://codepen.io/MarkBoots/pen/eYwNGKM?editors=0010

lanszelotOP•6mo ago

On my machine, on servers, not working

ἔρως•6mo ago

im out of ideas then

MarkBoots•6mo ago

ἔρως•6mo ago

the stuff after the .png make the image shrink to 350px or something

lanszelotOP•6mo ago

I wrote, this is not good. Links are not only png files

MarkBoots•6mo ago

i show an example. if it are different image files, then check for them all

lanszelotOP•6mo ago

How? How should "for loop" know which is png which is jpg which is PNG and which is JPG?

MarkBoots•6mo ago

 image.src = charNames[1].image[0].default.replace(/(\.(?:png|jpe?g|jxl|webp|avif|svgz?|gif)).*$/i , '$1');

 image.src = charNames[1].image[0].default.replace(/(\.(?:png|jpe?g|jxl|webp|avif|svgz?|gif)).*$/i , '$1');

ἔρως•6mo ago

MarkBoots•6mo ago

even nicer yes

lanszelotOP•6mo ago

I don't understand. What this line do?

ἔρως•6mo ago

match the pattern, then replace what matched with the replacement text https://regex101.com/r/HXtnXV/1

MarkBoots•6mo ago

so it looks for one of those extenstions and drops everything behind it

ἔρως•6mo ago

it's more nuanced than that, but yes

lanszelotOP•6mo ago

I see.

MarkBoots•6mo ago

i know, keep it understandable 😉

lanszelotOP•6mo ago

Thank you so much I will try it tomorrow. Thank you so much for everyone

lanszelotOP•6mo ago

Hello, I copy paste your code and something is not right. Did not show the image at all. https://codepen.io/lanszelot/pen/dyBozrK

Darth Vader

CodePen

Api problem

...

lanszelotOP•6mo ago

I got it. The first code working, the second not. I tried: if I use the full link in html directly it is show the image. But when I add the link with javascript it is not working. I have no idea why. There are the samples in the codepen

MarkBoots•6mo ago

these are 2 options you can use, with innerhtml or with a create elememt

// clean up the url
const characterImageUrl = charNames[1].image[0].default.replace(/(\.(?:png|jpe?g|jxl|webp|avif|svgz?|gif)).*$/i , '$1');
const characterName = charNames[1].name;
    
// add it with innerHTML and a template-string
document.getElementById("lista1").innerHTML = `
  <img src="${characterImageUrl}" alt="${characterName}">
`
// add it with a createElement
const imageEl = document.createElement("img");
imageEl.src = characterImageUrl;
imageEl.alt = characterName;
document.getElementById("lista2").append(imageEl);

// clean up the url
const characterImageUrl = charNames[1].image[0].default.replace(/(\.(?:png|jpe?g|jxl|webp|avif|svgz?|gif)).*$/i , '$1');
const characterName = charNames[1].name;
    
// add it with innerHTML and a template-string
document.getElementById("lista1").innerHTML = `
  <img src="${characterImageUrl}" alt="${characterName}">
`
// add it with a createElement
const imageEl = document.createElement("img");
imageEl.src = characterImageUrl;
imageEl.alt = characterName;
document.getElementById("lista2").append(imageEl);

lanszelotOP•6mo ago

First of all, thanks for help. How I wrote, no problems with codepen at all. The servers do the same. I wrote: " if I use the full link in html directly it is show the image. But when I add the link with javascript it is not working. I have no idea why. There are the samples in the codepen" JavaScript couse the problem. So somehow JS have to fix it. Not cut the code. I understand it is working cut off, but this is just a cover the problem solution. Just try it: add the full link with JS to the html, and you will see it is not codepen problem, it is JS problem. I don't know how to fix it . The cutting process make the site extremely slow. This is why not good solution.

MarkBoots•6mo ago

okay, then it's not a codepen issue, but it is also not a js issue. in that case it might be the source having some limitiations the api returns an url with a ?cb parameter. when you copy that url into the browser, it is showing the placeholder image. so removing the cb from the url probably will work

MarkBoots•6mo ago

it tried one and other, but i don't think this api is the most useful. it is doing some things serverside and even not all image excist anymore also, with you api query , you are retrieving 1522 characters. that will slow it down as well https://codepen.io/MarkBoots/pen/KKjpoxr?editors=1010 i looked for more documentation or even a github repository to find if there are know issues. but the creator of this api didnt make it public https://github.com/andrejaeger

Mark Boots

CodePen

KKjpoxr

...

GitHub

andrejaeger - Overview

work for ⭕⭕⭕⭕ as 💻. GitHub is where andrejaeger builds software.

lanszelotOP•6mo ago

Codepen and all online emulator use JavaScript, and this is why not working there. Just try what I said, insert the src with js, and not working. Directly write in html it is working. Api return the url, but I cannot edit the api. So it give me what it give me. Doesn't matter I delete only ?cb or all end after file extension the site get extremely slow. I know it is api site issue, give me wrong link, but I thought it could be fix it . But looks like cannot. I tried to store the links, in array, but no change, site slow down. I stored in json file, but same slow down. Only when I store the link in json, and download all the images and keep next to the html file not slow down.

MarkBoots•6mo ago

its the same on my local machine. really trust me, this api is no good

lanszelotOP•6mo ago

Yes, the api not good. Right. But this is the only api where all DB characters are in So no other options

MarkBoots•6mo ago

yea, i see your frustration. but i can not make that better. If there is none, you'll have to create it yourself

lanszelotOP•6mo ago

Only problem with store images and links is : there are links which have no image. With api gives me blank image. But with stored images and links drop error and not working If there will be a way to found all broken links I can create images. Anyway, thank you so much for help.

MarkBoots•6mo ago

im not behind my pc anymore, but if you check my pen, you can see all the broken ones. the name of the character is in the alt attribute (you could list them out programmatically, but im not able to right now)

MarkBoots•6mo ago

i just notice that these url's belong to https://dragonball.fandom.com/wiki/ the creator of the api probably manually sourced all the image urls to his project. but, if something changes on the wikipages, his api will be outdated immediately. when looking at his personal page, it looks like a project from 2022 and he has not made the repository public. So i suspect he is not maintaining it any longer. im looking if there is way to collect the data yourself from the wikipages, but probably we'll need to scrape each and every page (and hope all have the same format)

Dragon Ball Wiki | Fandom

lanszelotOP•6mo ago

Thank you so much Your api request working fast. So my request is faulty this is why get slow. I have to study more about fetch.

Gaming

Programming

Api image link how to use?