Why isn't this Animation working properly ?

Question

I wanted a cartoon sprite to go forward but the output is something else.
Can u fix it for me and tell me what is wrong
https://code.sololearn.com/WAL4dn2k8Wzr/?ref=app

Answer 1

Your problem is this line from your CSS: background:url("file:///storage/emulated/0/Download/e70e7d41a4a2af947f551aa49b1236d2.png");

To quickly see that line is responsible, replace that URL with another image's URL such as:
background:url("https://bellard.org/bpg/2.png");

You're using the file protocol to load your image. Maybe this works on your local computer when you're viewing the page directly off your file system. It won't work when it is accessed through a web server over HTTP.

What you probably want is to base-64 encode your image using a tool like https://www.base64-image.de/ and replace your background-image url with one from there.

Another option would be that you upload your image somewhere else. I generally put my custom graphics for Sololearn web codes in base 64 because that keeps the image with Sololearn along with the code and makes it so the code won't break when some other host goes down.

You might be interested in this question about adding images on Sololearn codes: https://www.sololearn.com/Discuss/1924077/can-we-add-images-in-sl

Answer 2

Hey Josh it is not working properly now also.....

Please fix this🙇
https://code.sololearn.com/WAL4dn2k8Wzr/?ref=app

Answer 3

Well explained, Josh 👍

Just adding on where to host your image:

[Tutorial] Upload content from your device to CodePlayground - The Dropbox way
https://code.sololearn.com/WW6t4B73kJVz/?ref=app

Answer 4

King Coder, your PHP code is completely empty as I look at it. There are no errors but it also outputs nothing.

You might have lost your work when you changed from "web" to "PHP". I hope you made some backups of your HTML, CSS, and js because it looked like you had a lot there before.