Question 43171 in Html Question posted in
Some basic documentation can be found here.

Local HTML image saved in project folder fails to load in page

Attempting to set up a logo button for my project, which would reload the page on-click. As of now, the file is saved in the images folder in the project itself. However, it doesn’t show up on the page. I tried taking out the styling from the button, to no avail.

Below is the HTML for the button. The img src is the relative path copied from the file in VS Code.

<h3 style="text-align:center;">
      <button id = "logo" style="text-align:center;font-size:30px;font-family:Courier New;color:yellow;background-color:black;border: 1px solid" value = "Ryder">
        <img src="imagesbykr_logo.jpg" border="0"/>
      </button>
    </h3>

I tried using the absolute path with file///: as other answers mentioned, and even changing it to an input of button type, doesn’t work. Any help would be great!

Tags:

2

Answers


  1. 0

    this code is working for me.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 style="text-align:center;">
      <button id = "logo" style="text-align:center;font-size:30px;font-family:Courier New;color:yellow;background-color:black;border: 1px solid" value = "Ryder">
    </button>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH0AAAB9CAMAAAC4XpwXAAAAZlBMVEX///8jHyAAAAAcFxgfGxz39/f7+/vy8vIJAAAUDhAYExTV1NQeGRq1tLTd3d2qqamPjo7Ew8N7eXnn5+eIh4ehoKA8OTpEQUIPBwljYWJTUVJLSEkuLCzMy8uVk5O+vb1ta2xbWloYKsSeAAAEaUlEQVRogd2b25aqMAyGbSjQFqh4ggoo8P4vudGZcUZQSaWpa+3/2sVnStocGlar/0thctgWffgRts5LI6Qq4g+wkw4gZYzxD9D1ESS7yj89zEGxbwWV5/ee1MBuUke/8IypXzgze6/w9dXZboK1T3gG7E6gPcI3IzhTkT+4Dvg9XG79wcNKjkyHkz96Pl53zvzB9RjO4OCPXgQjeFr487mJvzPIvMFX1dh02fszPZmYrjyeNHszXnePh2xcpCO4x4NmsvCm9ggfYtu9x5Vec5qtuYfvfMJX/d+cAirP2Vz163QBnP2yV2H5Q0+h9hjY7uhcinL9gfqhBAFCNt3mI5VTdj6vN9oDOgpxkFgnm81J71zFmlC3+bEqi6Lu81a/eGqks23dKCOEkazo883i7R+d9jUf3q1KOQ+UAFadk4eLEOm8YmBuGWaqAJp+veQPxOsKxH0gCUBUh8kzd4dKwDjUM66AbZN34VkzfeLXH+jaP28gao/m4Q+vuxH6t+xPCuCPHznkEABde93icTsU7erZ775+u7d2wWj/zJxvScHr/NxzM07npxKF5fLvajH7UKaEeGn17w95awPXzbxFNuI2mW6iXq/6G8LjE5POP84aj1x8zZxbzi7lHcr1ohLnSraSJSZSbCcVghMFJkfQp5WZE5kGk/zEzdMDbongiArQexLTAddD0yQeJ3IUfFQfOBLS8pVGnO7WEh0OTmJ6WiDhKwqXQ3cuWwI6vmXcufd4zrBVTkhgOr57d3JP5w06pzy732/4tx717uM6vmNMEGAsbqemDd/FUh0WTrHbLfrVBwI6vp+Su3d5wNdwW7cVxJWOb+cc3Z+zKb6r0junc4anTzr9y+nNJ+nso7Yz81G6xY5z73UM8E0Lgh1n0TQgOG0s5gAITtoAfztHEGWYQLsdRT6Nv5+bXiwuF378ZOfe6wY8ds/FJUHjwKBvJwk2/OB32DKOIJ8flh57O0rh9Pg24Y6oV4bb8xFNv0oir0gJTvqLkK2T8cCUKwEKHxPRmUAdeSVFd/oLj3A9kh1/lUHczSRkdBbAfMOSbOkHgZnLsygyjJs4FK9rWpou8U1znUOSOPej2TSP6sC5ajbPiguSs/6bPltYTSYV3Qkx7kkUZi/C1FVEgW7wOUyjniKxvgpX1B1pjEeZfrkEJqFjy5qOAh9gh+80RajBl/IEF5KqQtfSk2nN5bLoobivK4TVsKljx+PSav4ufD7p845sh6udRlpj/QmLwwGItLGee4xrZ1kObGzhDrPr92Zd127WXtXvTTl2Lqzn8+nUE5UOYu3736/sisWet+QLkqRZiF82XZ00T6MtVwYuEvJ5SMJOmzyTDh5aHwDIar/O2jY7d8WzyUpE2TqjuJhsPA7QH/5WZHHWyekYpnLxCUe0vbOMSyjO00ZEnI1Gb1Oo3x6lvdOpAsl/0E23eXxqh8m+FELxn7+4djXdHW2OzAwKii571X+JT+e+4VLy5nva1pVCfTolqKbjTmsk+R/6k0dRcUDNkwAAAABJRU5ErkJggg==" />
    <!-- <img src=".imagesbykr_logo.jpg.jpg" /> -->
    </h3>
</body>
</html>

    just make the directory name "images" in the project and name the logo "bykr_logo.jpg.jpg"
    if you want to use the absolute path with file///:
    just right-click on the file in vs code and click copy path and paste it into the browser URL, browser loads your image wi the absolute path.

    Login or Signup to reply.
  2. 0

    Maybe if you specify the full path to the image like

    c:/path-to-image-folder/images/bykr_logo.jpg

    or if you base your path from the current working directory, notice the dot at the beginning like

    ./images/bykr_logo.jpg
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search