The issue lies in the fact that the <img> tag is not displaying the images properly within the HTML document

After testing this code in all of my HTML projects, I noticed that all the images in my project have disappeared. I am certain that the image paths are correct as I have checked them multiple times. Here is my code. I did not include CSS since it is not essential;

<html lang="en">
<head>
    <link rel="stylesheet" href="mad.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="C:\Users\Samet\Desktop\Resim\mogus.png">
    <title>wutr</title>
    <link rel="stylesheet" href="https://fonts.google.com/specimen/K2D">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
    <h1>There is 7 rules in this world</h1>
    <ol>
              <div class="prf"><li><p>There is only one thing in this world</p> </div></li>
    </ol>
    <img src="C:\Users\Samet\Desktop\Resim\mogus.png" alt="imgd" height="1000px"width="100px">
<p class="pain">Pain</p>
</body>
</html>
htmlcss

Answer №1

Avoid using image paths like the one above, but if you need to, try the following:

<img src="file://C:\Users\Samet\Desktop\Resim\mogus.png" alt="imgd" height="1000px"width="100px">

Remember, this method only works on Windows machines. For macOS or Linux, use:

<img src="/Users/Samet/Desktop/Resim/mogus.png" alt="imgd" height="1000px"width="100px">

Another solution is to reference the image path from the index.html location. If the image is in the same directory as your HTML file, simply use src="mogus.png"

I hope this clears things up for you. If not, feel free to reach out and I'll investigate further.

Answer №2

There seems to be no error here. Please ensure that your image is in the correct PNG format and also confirm that it is not corrupted. If the issue persists, feel free to upload your image here for further assistance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on incorporating a component from a nested directory with webpack

https://i.sstatic.net/kLB0S.png The directory structure above shows how my react app 'MyProject' is organized. Using this structure, I successfully utilize the Layout component in Main.jsx (located at src/Main.jsx) by : import Layout from &apo ...

javascripthtmlcssreactjswebpack

Utilizing GSAP for crafting a dynamic horizontal scrolling section

I am currently working on creating a unique section that transforms into a horizontal scroller once the items (in this case, images) are visible, and then reverts to a vertical scroller once all the items have been scrolled through. My inspiration and ada ...

javascriptjquerycssgsapscrolltrigger

Creating an HTML Canvas effect where images are placed onto another image

Looking to create a similar effect as seen on this website () On this site, users can upload their images (4000 * 400) and have the option to add Mickey Mouse ears over their image before saving it. The Mickey Mouse ear is resizable from all four sides f ...

javascriptjqueryhtmlcanvas

Creating a seamless integration of header, content, and footer components within html2pdf

After creating an HTML page, I utilized the html2pdf library to convert it into a PDF format. Here is the code snippet: <?php require('../admin/html2pdf/html2pdf.class.php'); ob_start(); ?> <page> <page_head ...

phphtmlcsshtml2pdf

Playing videos from the client machine using HTML5

I seem to be having trouble playing videos from my CLIENT MACHINE using HTML5. Below is the syntax I am currently using. <div> <video width="320" height="240" controls autoplay="autoplay"> <source src="file://D:/Videos/bigbuckbunny.mp4" typ ...

asp.nethtmlhtml5-video

Restoring the background color to its original shade following alterations made by jQuery

In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...

jquerycssbackground-color

Ensure that only the admin is able to make something vanish for everyone else

Is there a way to hide content for everyone except the admin? Currently, I have this code implemented but it only works when a user is not logged in. When another user logs in, the content is still visible. <?php if( isset($_SESSION['username&a ...

phphtml

Modifying the HTML attribute value (of input) does not impact the value property

After inputting a single tag, I ran the following code in my Chrome console: https://i.stack.imgur.com/ySErA.jpg The result was unexpected for me. According to what I have read in a book, when I change an HTML attribute, the corresponding property should ...

javascripthtmlgoogle-chromeattributes

Oops! Something went wrong: SQLSTATE[42S22]: Column not found - Error 1054: Unknown column '0' in the 'where clause'

I am encountering an issue with my Laravel page when attempting to implement a "soft delete" feature using the active field in the database. The error message I receive is: emails.ERROR: SQLSTATE[42S22]: Column not found: 1054 Unknown column '0&apo ...

phphtmlmysqllaravel

Exploring the power of AngularJS through nested directives

Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...

javascripthtmlangularjsnesteddirective

Bootstrap4 Accordion - Expand/Collapse All with pure CSS

Below is a code snippet excerpt from the Bootstrap4 documentation, sourced from: https://getbootstrap.com/docs/4.0/components/collapse/ <p> <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1&q ...

htmlbootstrap-4accordion

Adjust the translateX value and element size based on either the parent element's size or the window's dimensions

Is this question specific enough to relate to others' problems? My issue involves two elements, a child and a parent, with the child element rotating around the parent using CSS animations. <div class="planet"> <div class="moon"></di ...

javascriptjqueryhtmlcss

The HTML file contains the complete version number of Firefox

If you're an expert in HTML, take a look at my expandable start page. I know there's room for improvement, and I'm seeking advice on automatically updating the Firefox browser version number in line 106 of the code snippet below. (Linux Mint ...

javascripthtml

Querying Mysql to sort results by brand and calculate the total brand value

Hello, I am currently working on a query where I need the brand_name to be unique but the brand_value should display as sum. Below is the structure of my MySQL TABLE with Primary key: betbingo 1 www.abc.com betbingo 1 www.abc.com betbingo 2 www.abc ...

phphtmlmysql

The CSS of the Sendgrid template is being overlooked

I have utilized Sendgrid to create the template mentioned below: https://i.sstatic.net/TFQfl.png In order to send this template using my Node server, I have developed the module provided in the code snippet: /* * Created by root on 6/6/16. */ var path ...

csssendgridemail-templates

Implementing the Applet Param Tag using JavaScript or jQuery

<applet id="applet" code="myclass.class"> <param name="Access_ID" value="newaccessid"> <param name="App_ID" value="newappid"> <param name="Current_Url" value="newticketurl"> <param name="Bug_ID" value="newbugid"&g ...

javajavascriptjqueryhtmlapplet

Tap here for supplementary HTML

My HTML code looks like this: <a class="link">text</a> <div class="items"></div> (function($) { var link = $('.link'); link.click(function(){ alert('it works!'); }); $('.items').each(fun ...

javascriptjqueryhtml

How can I position my navbar above my background image using Bootstrap?

I am a newcomer to using bootstrap and I am attempting to create the following design: https://i.sstatic.net/EV9A1.png In the design, the navbar is situated on top of the background image. However, with my current setup, this is what I have: <!DOCTYPE ...

htmlcsstwitter-bootstrapbootstrap-4

Vercel deployment is experiencing issues with the integration of Tailwind CSS

I've encountered an issue with my website where it works fine on local hosts but when deployed on Vercel, the output.css file is empty. Here is a snippet from my package.json file: { "devDependencies": { "tailwindcss": "^3.1.8" }, "scripts" ...

cssjsondeploymentverceltailwind-ui

Embracing the balance of a gradient backdrop

I'm looking to create a gradient background for my page that transitions from light blue in the center to dark blue on the sides in a symmetrical way. I've tried using a linear gradient that goes from left to right, but it doesn't achieve th ...

htmlcss