Html background image URL path is gigantic

Question

0.00/5 (No votes)

See more:

Hi, I have a div in which i will host a background image behind where i can choose any image from my local PC. I tried to save the URL path into my DB upon button click so that i can retrieve the image path next time i load the page without having to import the image again from my PC.
But i have found that the URL path is super huge. For example, i have an image in my desktop path(C:\Desktop\Image1.jpg). But when i tried to retrieve the value using javascript:

var bg = $(this).css('background-image');
bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");

, it became super huge url with a total of 200k plus characters count where it is impossible for me to save it.

What I have tried:

1. Look online for suggestion but all are using similar way to retrieve image URL. Only different is online article is getting website URL instead of local PC image path.

Posted 3-May-18 16:28pm

Jamie888

Updated 6-May-18 17:25pm

Add a Solution

Comments

dan!sh 3-May-18 23:48pm

Erm...if you are uploading the file on the database or wherever, the URL should come from the server right? This also means that you decide the URL. Are you shipping image as base64 string?

Jamie888 4-May-18 2:16am

i am not really sure sir. From F12 inspection of element, the background image is one of the attribute in my div. In fact, the url shown in the div is not even the path(e.g. from my desktop) but something like "%tyfhri123*(eys)?<><...." counting until 200k characters.

dan!sh 4-May-18 3:38am

In that case I think you should look for image upload/download samples for the technology set you are using.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jamie888 · Answer 1 · 2018-05-06T17:27:00

After some research online, found that this is due to the image path get converted into base64 string. And in order to allow a proper path to be saved, the base64 string need to be decoded back into normal human readable string. This can be achieved by using atob(). Please refer to Window atob() Method[^]. Thank you Iw@zi for your help. May this suggestion will help other who need it.