jQuery how to add image from computer

Question

I am working on a website and creating my own gallery. However there seems to be a little problem with the code. I want to add my picture from my computer so it has the right width and height. Here is the code. I tried to do cover in CSS but some images are too big and won't fit. Thank you for reading.

<script type="text/javascript">
$('#button1').click(function()
{
$('#gallery').css("background-image", 'src=C:\Users\Eigenaar\Desktop\Nieuwe map\luffy');
 //luffy serieuse kop
});  </script>

and this is my second button which works perfectly fine but also want to change because width and height problems

<script type="text/javascript">
$('#button2').click(function()
{
$('#gallery').css("background-image", "url(http://vignette3.wikia.nocookie.net/mvl/images/e/e9/Luffy-One-Piece.png/revision/latest?cb=20140221162732");
//luffy lachende kop
});  </script>

so what I want to know is how to add my own picture.

Possible duplicate of Why can't I do <img src="C:/localfile.jpg">? — EnigmaRM
– EnigmaRM, Commented May 18, 2016 at 17:34

Caroline Hermans · Accepted Answer · 2016-05-18 17:29:23Z

3

The image path you use shouldn't be the actual path of the image on your computer, it should be the path that the specific html file you're in would use to get to the image.

Your link here is the problem:

'src=C:\Users\Eigenaar\Desktop\Nieuwe map\luffy'

For example, if I had a directory that contained:

index.html

img.jpg

index.html could display img.jpg using src='img.jpg'.

However, imagine I have a directory where index.html is on the same level as a directory called "images" which contains your image file, like this:

index.html

images
    img.jpg

Then, in order to display the image I would use src='images/img.jpg'.

Most of the time, people have a folder with all of their website images in the same folder as their index.html file so they can pull directly from the folder.

Hope this helps!

Bonus learning note:

.. means "go up a directory". This is useful if you can't directly access the images folder from your html file. For example, if your directories looked like this:

html
  index.html

images
  img.jpg

You would first have to go up a directory before entering the images folder and displaying img.jpg. Then, your file path would be src='../images/img.jpg'.

answered May 18, 2016 at 17:29

Caroline Hermans

3911 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mikailavci2 Over a year ago

i tried everything out i possibly could with this but my english ain't the best.so ur telling me i should make an folder for images and than use src = '\images\luffy.jpg or what?

Collectives™ on Stack Overflow

jQuery how to add image from computer

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related