CODEWITHSUNDEEP
htmlcss
Ethan Messinger
Ethan Messinger

Reputation: 67

Trying to Get Image to Show from Local

I am very confused. Been trying to get my image displayed for hours using the browser. It is a png image coming from a local file:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport", initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="styles.css"
    </head>
    <body> 
        <div>
            <div>   
                <p>
                    <img src="C:\Users\ezmes\Desktop\GruHopper\img\screem.png">
                </p>
            </div>
            <h1>Test</h1>  
                <p class = "text_title">Test</p>
        </div>
        <div class="two_buttons">     
            <div>
                <button class = "red_button">
                    <span class = "get_started">Get Started</span>
                </button>
            </div>
            <div class = "button2">
                <button class = "white_button"> 
                    <span class="have_account">I already have an account</span>
                </button>
            </div>
        </div>
    </div>

    <script src = "sandbox.js"></script>
</body>
</html>

Appreciate any help!

Upvotes: 1

Views: 74

Answers (3)

Lin
Lin

Reputation: 41

I think the img src is wrong

You should add img src start from your .html file and then go to the img file

example :

-test_folder

--index.html

--images_folder

---screem.png

so the img src is like this :

<img src="images_folder/screem.png">

hope this answer can help you.

Upvotes: 0

Dinesh
Dinesh

Reputation: 43

<img src="C:\Users\ezmes\Desktop\GruHopper\img\screem.png"> is wrong this is because you can access local files if the html file also accessed as local file if you uploaded the page to server or access via localhost, then it is not possible to access local file directly. In order to make this work rather than giving absolute path move the picture to folder where the html code resides.

Example
code in folder1
image in folder1/images
so your src should be <img src="images/screem.png">

hope this helps.

Upvotes: 1

Lemmy Kilmister
Lemmy Kilmister

Reputation: 37

I usually use another method. I convert the picture into base64 and add it into the code. Don't worry about slowing down your site. It makes no difference.

There is a nice online site where you can convert your picture into base64 code , the URL is : https://www.base64-image.de/

I have already uploaded a picture and obtained the following code: take a look here in this codepen I show how to use the code.

I am going to enter a part of the code here also because that's the rule on stack-overflow. But this piece don't work. if you want to check it all out go to the link I submitted.

<img src=" data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD ... RRRQB//Z">

Upvotes: 0

Related Questions