Displaying photos locally in HTML is not supported

I've encountered an issue with my HTML code. I'm trying to load images from my local drive, and the path to the folder seems correct because I can open the images by ctrl + clicking on them. However, when I open my page using a live server or host it somewhere, the images load fine. The problem arises when I try to load the images by opening index.html directly, as no pictures are shown.

When loading from a live server:

https://i.sstatic.net/4B0Dk.png

By opening index.html:

https://i.sstatic.net/g54Xt.png

<img src="/img/special.png" alt="">
 background-image: url(/img/apartments.png);

I have tried using one of these two lines of code to display the images, but they still don't load properly.

htmlcssimage

Answer №1

try using 

<img src="./images/unique.png" alt="custom image">

Answer №2

I discovered a solution! When referencing the image, it should be ./img; and if used in CSS (since it's in the style directory), it should be ../img. Appreciate all the help provided, and hopefully this comes in handy for someone else in the future.

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

Exclude certain labeled posts from appearing on the homepage of a Blogger website

I am managing a website dedicated to the best WhatsApp status on my blogger blog. I am in search of a way to conceal certain category posts from appearing on the homepage using coding techniques. Despite extensive research, I have been unsuccessful in fi ...

htmlblogger

"Create a dynamic HTML newsletter utilizing tables similar to the responsive design principles

Looking to create a mobile-responsive newsletter using my style.css <table cellpadding="0" cellspacing="0" border="0" align="center" width="600" bgcolor="#fff"> <tbody> <tr> <td style="padding-bottom:5px" valign="top"&g ...

htmlcsstwitter-bootstraphtml-tablenewsletter

Implementing jQuery form.js to dynamically update image src upon success

I am currently utilizing jquery.form.js to submit a form via AJAX and retrieve a response. My PHP page is configured to output the image URL in the format "images/thumbs/071112130957.jpg" Below is my jQuery code: $("#imageform").ajaxForm( { target: &ap ...

phpjqueryhtmlajaxform

Refresh all tabs in the TabContainer

I have implemented multiple tabs using dojo on a web page, and I need to refresh the current tab every 5 seconds without refreshing the entire page. You can check out the code in this fiddle: http://jsfiddle.net/5yn2hLv9/4/. Here is an example of the code ...

javascriptjqueryhtmljspdojo

React not displaying images with relative paths

In the past, I used to import images in React like this: import person from '../images/image1.png' And then use them in my code like this: <img src={person} alt="" /> Now, for some reason, I want to directly specify the image pa ...

javascripthtmlcssreactjs

A collection of items that mysteriously affix themselves to the top of the page as

Unique Context In my webpage, I have a specific div element with the CSS property of overflow: auto. Within this scrolling div, there is structured content like this: <h3>Group A</h3> <ul> <li>Item 1</li> <li>I ...

phpjavascriptjqueryhtmlcss

Ways to transfer ID to a different HTML page

I have some Javascript code in a file named nextPage.js. When this code is executed by clicking on something, it should transfer the value of category_id to another page called reportlist.html. Can you please provide assistance with this? var base_url = " ...

javascriptjqueryhtmlajax

what is the best way to display camera view in full screen on an iOS application?

What method should I use on an iPhone to launch the camera in full screen mode? Additionally, how can I overlay a compass on top of the camera view on iOS? ...

htmlobjective-c

How can I resize and horizontally align an image using html/css?

Is it possible to resize, crop and center an image using only HTML/CSS? (Using the img tag or CSS sprite) For instance, if I have a 500x500 pixel image, I would like to resize it to a 250x250 pixel image To make the actual visible image 100x100 pixe ...

javascriptjqueryhtmlcss

Creating a Bootstrap 4 DIV element with horizontal scrolling functionality

I've been struggling to implement a horizontal scroll for a DIV on my site, but none of the common solutions like overflow-x or white-space:nowrap are working for me. This is the section of my website where I need a horizontal scroll bar If you want ...

htmlcssbootstrap-4

Tips for designing a form action

I am a beginner and struggling with understanding the CSS for the code below. Can someone help me out? <div id="page-container"> <?php include_once("home_start.php"); ?> <h1>Login</h1> <for ...

css

Arranging elements in a Material-UI card in a horizontal layout

I am currently working on designing a user profile display. I want to create a card layout that showcases the details listed below. My goal is to have these items displayed side by side instead of being divided as shown in the image. Despite trying to giv ...

cssflexboxmaterial-ui

Various Mobile Devices Display Website in Unique Ways

I've been having trouble getting my website to display consistently across different phones and could use some assistance. You can view the site at www.fpphotos.store. I have set overflow-x:auto; for the table containing the images, with CSS styles de ...

htmlcss

Guidelines for choosing input using jQuery

I am looking to retrieve the value of an input using jQuery. Specifically, I need to extract the value of a hidden input with name="picture" when the user clicks on the حذف این بخش button by triggering the function deleteDefaultSection( ...

javascripthtmljqueryjquery-selectors

Ways to make video controls visible following the initial click on the video

I have a collection of videos on my website and I would like them to display with a poster (thumbnail image) initially. The video controls should only appear once the user clicks on the video for the first time. Therefore, when the page is loaded, the cont ...

javascripthtmlcss

What is the reason behind jQuery appending a closing tag to the end of the text when adding a table dynamically?

$('#all_locations').append("<table>"); $('#all_locations').append("<tr><th>City</th></tr>"); $.each(data, function(i, item){ $('#all_locations').append("<tr>"); $('#all_locatio ...

jqueryhtmljsonhtml-tableappend

I possess a high-quality image that I wish to resize while maintaining its resolution and clarity

I'm struggling with optimizing images for retina display on my website. I typically use the drawImage method, but I have a collection of large images (canvas drawn) that I want to use at half their size while maintaining image quality. Does anyone kn ...

javascriptimagecanvas

Is there a way to ensure that GIFs in jQuery Mobile always start from the beginning?

My cross-platform mobile app built with jQuery Mobile is a small quiz application. After each correct or wrong answer, I display a 3-second GIF. Currently, I have set up the code to show the GIF for 3 seconds before moving on to the next page: else if ($. ...

javascriptjqueryhtml

Choose an Option that Does Not Allow PHP as a Value

Currently, I am retrieving a value from the database where interval days are set to 5. However, when I display it, it always shows '0' within my option form. <?php $interval_day = $this->crud_model->auto_order_interval_day(); ?> ...

phphtml

Tips for making radio button selection mandatory in an HTML5 form

How can I require a user to select one radio button in an HTML 5 form before submitting it? I attempted to use the required attribute, but since there is no radio button group, how can I apply this requirement? <form action="/Home/Sendtitle" method=" ...

htmlformsvalidationradio-buttonform-submit