The pictures are not appearing on my local website

After completing the following steps:

  1. Node.js was successfully installed
  2. In the command prompt, I entered: npm install http-server -g
  3. Navigated to my website files located in cd user/me/local
  4. In Google Chrome, I typed: localhost:8080

Upon opening my HTML file in localhost8080 to view my website, I noticed that all the images were missing. In my HTML file, I included: 

<img  src="imagens/karla.jpg" />
However, it seems that my C drive cannot be accessed resulting in no images being displayed. I attempted using 
<img  src="http://localhost:8080/imagens/karla.jpg" />
but the issue persisted. Interestingly, the link http://localhost:8080/imagens/karla.jpg worked and displayed the image.

It's worth mentioning that when testing my website on Visual Studios, everything functioned properly. My localhost8080: https://i.sstatic.net/vY55x.png

EDIT: Actually, all is well now. It turns out that my dark mode extension in Chrome had turned all my images black... my apologies

htmlcsslocalhost

Answer №1

For a comprehensive look at the code, try using the "inspect element" feature by pressing ctrl+shift+i on your keyboard. Once in the developer console, navigate to the sources tab where you can easily identify the image extension.

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

Adjust image size with react - personalize styling for react-easy-crop

I am currently working on developing a basic react component that involves cropping images using react-easy-crop. It seems like the style of the react-easy-crop module can be customized with the style prop, which consists of three objects: containerStyle, ...

cssreactjscrop

Is this considered a table?

In the realm of web development, there is a well-known mantra: "Only use tables for tabular data." This advice stems from a time when tables were misused for all sorts of layout purposes. While I generally adhere to this guideline, there are moments when ...

htmlcss

Display a division upon choosing an option

I am working on a project that involves a selection menu in the form of a drop-down list. <select> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> Also, I ...

javascriptjqueryhtmlcss

Horizontal expanding and collapsing navigation menu

Is there a way to modify the expand menu bar so it expands from left to right or right to left, instead of top down? Any assistance would be greatly appreciated. Existing Expand Menu Bar <HTML> <HEAD> <META http-equiv="Content-Type" c ...

htmlcssexpand

Having trouble retrieving all img tags while scraping a website using BeautifulSoup (BS4)?

My goal is to collect a list of all the <img> image tags from a website. Unfortunately, I'm only able to retrieve a few and not the rest even though they are present in the HTML code when I inspect with developer tools. In my code snippet below, ...

pythonhtmlbeautifulsoup

In which specific location within the Bootstrap CSS files can the `footer` class be found?

Being new to coding, I've grasped HTML and CSS classes and am now delving into Bootstrap. Despite my efforts, I can't seem to locate the footer class in any of the Bootstrap CSS files like bootstrap.css. Similarly, I'm having trouble findi ...

htmlcssbootstrap-5

Conceal the <p> element when the user interacts with the internal href

After creating this document using JQuery, whenever the user clicks on different internal links, a div with id = "change" is loaded which effectively "erases" the content. My challenge at the moment is that while images are successfully deleted, text rema ...

javascriptjqueryhtml

Manipulating lines and positions with jQuery

I am looking to implement a feature that allows users to choose a specific region on an image using jQuery. The functionality should be similar to the tagging feature on Facebook, but with the added bonus of being able to rotate and scale the selected area ...

javascriptjqueryhtmlcss

Display HTML tags on an HTML page using TypeScript

In my angular application, I encountered an issue where I needed to call one component inside another component. Initially, I was able to achieve this by simply using the second component's selector in the HTML of the first component: html: <div&g ...

javascripthtmlangulartypescript

Loading AJAX content within the existing page instead of a pop-up window

My goal is to have the page links load in a popup, but after adding this script, the page loads at the bottom instead. How can I make it open in a popup window instead? $('a[rel="ajax:jmodal"]').click(function(event) { $.ajax({ url: $(this).a ...

phphtmlajax

Enlarging the current division while reducing the size of the others when hovering

Currently, I am working on a school project that involves creating a slideshow on a webpage. However, I have reached a point where I am unsure of how to proceed. Here is the progress I have made so far: body { background-color: #252525; } #wrapper { ...

javascripthtmlcss

What steps do I need to take to implement AJAX form authentication?

I have set up a login screen that validates username and password credentials through a php script. When a user enters their information and submits the form, the authenticate.php file executes an LDAP bind. If the credentials are correct, the user is redi ...

phpjavascripthtmlajaxopenldap

Looking to automatically dismiss a tooltip on mobile devices a few seconds after it's tapped

Here's an anchor tag with a tooltip: <a data-toggle="tooltip" data-original-title="Apologies, pronunciation audio is currently unavailable."> <span class="glyphicon glyphicon-volume-off pronounce"> </span> </a> When v ...

htmlcsstwitter-bootstrap

I am attempting to send a variable from my Google Script to HtmlOutputFromFile in a seamless manner

I am currently working on developing an input box with a dropdown list, where the options are generated from a 2D array retrieved from a Spreadsheet. My investigation has revealed that by storing HtmlService.createHtmlOutputFromFile in a variable, I can " ...

htmlgoogle-apps-script

Limiting ng-repeat in AngularJS when the last item on the object is reached

I have a large object being repeated using ng-repeat, and it runs smoothly on Chrome and Opera. However, when it comes to browsers like Mozilla and IE, the performance is very slow. I tried implementing pagination, which helped speed things up, but ideally ...

javascripthtmlangularjsangularjs-ng-repeat

Adding a component to a grid row with a click action

I have a grid of items and I want to display another component that takes up the full width below the clicked item when it's selected. Here is an illustration of what I'm trying to accomplish: https://i.sstatic.net/5XIvf.png Within my button-li ...

cssangular

Creating a user-friendly interface for the admin to easily upload photos by implementing a php/bootstrap/js code within the panel

I'm currently in the process of creating an online website as part of my thesis project. I've been researching this specific code, but unfortunately, I haven't been able to find a solution. In the admin section of the site, I need to enable ...

javascriptphphtmlmysql

I'm looking to incorporate a hover effect on a hyperlink within JEditorPane utilizing Swing in Java. How can I achieve this

After successfully implementing the hyperlink in jEditorPane through this link, I now aim to incorporate a hover effect to the hyperlink. I attempted to apply CSS using the following code: MyHTMLEditorKit kit = new MyHTMLEditorKit(); setEditorKitForConten ...

javahtmlcssswinghyperlink

Using AJAX and Perl to dynamically update HTML content

Currently, I am attempting to dynamically update a div on my website using ajax and perl. The current implementation I have sort of works but needs improvement. HTML: <h2 id="cpu">--</h2> JS/ajax call: $.ajax({ type: 'GET&apos ...

javascriptjqueryhtmlajaxperl

A guide on debugging Sass using Sencha Touch on an iPhone

After making changes to the sass file in Sencha and compiling it, I cleared the iPhone simulator and cleaned the project. Despite seeing the new styles applied in the browser, they do not reflect on the iPhone simulator or the actual device. The change I ...

ioscssextjssencha-touchios-simulator