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:

By opening index.html:

<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

The issue of not being able to go fullscreen with a YouTube iframe nested within another iframe

I have a YouTube video embedded inside another iframe, but I am facing an issue where the fullscreen feature is not working even after enabling all the required attributes. If the video isn't displaying properly in the code snippet below, you can vie ...

javascripthtmliframeyoutubeyoutube-api

Introducing the new default in Google Chrome: Now accessing window.opener for target="_blank" links after rel="noopener" is the standard feature

Exploring a new attribute called rel="noopener", I discovered that it keeps opened windows unaware of their opener. After some experimentation, I consistently found window.opener === null, only to realize that this is now the default behavior in ...

javascripthtmlgoogle-chromesame-origin-policywindow.opener

I have come across this building error, what do you think is the cause of it?

My attempt to launch my company's React.js project, downloaded from Tortoise SVN, is encountering an issue. PS C:\Projects\Old EHR> yarn start yarn run v1.22.19 $ next start ready - started server on 0.0.0.0:3000, url: http://localhost:30 ...

javascripthtmlreactjsnext.js

Creating a Music Bingo game to ring in the New Year

Looking to create a Music Bingo game for New Year's Eve with randomized songs that can be selected, but experiencing an issue where nothing happens when you have 4 in a row. Attempted adding a submit button, but it doesn't trigger any action. Ide ...

javascripthtmlcss

Please explain the display property used in Bootstrap input groups

I have been working on implementing a button that toggles the visibility of a datepicker when clicked. <a class="btn btn-primary btn-lg mr-5" href="../Stores/stalls.html">Check Current Operating Stalls </a> <div style="vertical-align: t ...

htmlcssbootstrap-4

Implementing a distinct approach to adding margins to div boxes using

Hello, I've been experimenting with the developer tools in Google Chrome to add margins to my navigation bar. The goal is to create gaps between the boxes. Any assistance would be greatly appreciated! http://jsfiddle.net/3jp1d0fe/8/ CSS div.contain ...

css

Implementing an unordered list in an inline format, even when it is collapsed with Bootstrap

Recently, I've been delving into Bootstrap and experimenting with coding a basic website. Below is the code for the navbar: <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class ...

htmlcsstwitter-bootstrapnavbar

To showcase the entire contents of a specific column from one table onto a different table on the following page once the box is ticked

Everything seems to be running smoothly, except for one issue. When a row contains the value "hello world" in a column on the first page, it only displays "hello" in the item column on the second page. I'd like it to show the full value "hello world" ...

phphtml

The text manipulates the canvas position and changes the location of mouse hover interaction

I am trying to achieve a similar header layout like the one shown on this page. However, when I insert some text within the header section: <div id="large-header" class="large-header"> <h1 style="font-size:150%;">Dummy Text</h1> ...

javascripthtmlcss

CSS transform causing scrolling issues in Microsoft Edge browser

Whenever I click a button, a div flips. Once flipped, the div contains a scrolling list. If the list is not long enough to scroll, everything works fine. However, if the list is long enough to require scrolling, the items disappear... This issue ...

htmlcssoverflowcss-transformsmicrosoft-edge

Expanding the foundation of the HTML problem

I have my main page located at index.html and I am trying to transfer my template to base.html. In the index.html file, I used {% extends 'base.html' %}, but it is showing an error of *Unresolved template reference ''base.html'&apo ...

pythonhtmldjangojinja2

Running yarn build in react results in CSS modifications

When working in my local development environment, I have everything functioning as intended. However, after executing yarn build, all of my styles appear drastically different. The project was set up using create-react-app and styled with regular CSS. Bel ...

cssreactjscreate-react-appyarnpkg

Inserting multiple rows of data into a MySQL database in a single page using only one query in PHP

This snippet shows a MySQL query being used to update and insert data into a database: if ($_POST["ok"] == "OK") { $updateSQL = sprintf("UPDATE attend SET at_status=%s, at_remarks=%s WHERE at_tt_idx=%s", GetSQLValueString ...

javascriptphpjquerymysqlcss

What is the best way to incorporate material icons onto a website?

When I attempted to display an icon on my webpage by adding <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> to the index.html file, only the icon name appeared as text instead of the actual ...

htmlcssgoogle-material-icons

When using Italics, the conflict arises between the specified line-height and the actual height of the

Recently, I encountered an issue that has me a bit perplexed: I have a span element with line-height set to 18px and font-size at 16px. Everything works perfectly when the text inside is regular; the height of the span remains at 18 pixels. The problem a ...

firefoxhtmlcssitalics

I'm encountering inexplicable duplications of elements on my Wordpress site

Here is an example of my template header: <header> <?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?> <a class="menu-toggle">menu</div> <?php wp_nav_menu( array('them ...

javascripthtmlwordpress

How can elements be displayed differently depending on the return value of a function?

Basically, I am looking to display different content based on the status of a job: Show 'Something1' when the job is not processing Show 'Something2' when the job is running and has a status of '0' Show 'Something3&apos ...

htmlangular

What is the best way to include multiple tags (specifically for articles) in the Facebook Open Graph?

When it comes to a single blog or article with multiple tags, how can you add Facebook Open Graph data? This method seems like the most logical way to do it. However, the Facebook debugger reports that it's incorrect: <meta property = "article: ...

htmlfacebook-opengraphrdfa

Tips for inserting a page break after every item in a loop in Visualforce when generating a PDF document

I need help with rendering a VF page as PDF. The VF page iterates over a list of account records using the repeat tag. I want to apply a page break for each element in the repeat tag. The code below is working, but it has an issue - it shows an empty PDF p ...

javascriptcsspdfsalesforcevisualforce

Techniques for adjusting the dimensions of a select dropdown using CSS

Is there a way to control the height of a select dropdown list without changing the view using the size property? ...

htmlcss