Issues with Image Loading in Azure WebMatrix

I am currently using WebMatrix to host my website, but I'm facing some issues with certain elements not loading correctly. Specifically, I have two pictures on my site that are linked to a directory on my local machine. I would like to know how I can change the links to point to an Azure directory instead, so the pictures will display properly on my site. If you inspect the site using F12 and scroll down, you'll notice at the bottom that these two pictures are not loading. Any suggestions on how to fix this?

Here is the link to my site: 

<div class="imagess"> <img src="C:\Users\alex\Desktop\rootforsite\img\pic.jpg" class="img-responsive center-block"  /> </div>
                </div>
    </div>
    <div class="imagess"> <img src="C:\Users\alex\Desktop\rootforsite\img\pic11.jpg" class="img-responsive center-block" style="margin-top: 10px;" /> </div>
    <iframe width="540" height="360" src="http://www.youtube.com/embed/mb6SNytt5YI"   frameborder="0" allowfullscreen style="margin-top: 70px;"></iframe>
</div>

Looking forward to your advice.

htmlcssazure

Answer №1

The most effective solution is to upload the image online.

As I was checking the console, I noticed an error message stating "Not allowed to load local resource".

This issue arises because you are attempting to access the file from your local directory, which the website does not recognize.

You have two options: either upload the image or follow a series of steps to create a servlet.

If needed, refer to this helpful link:

"Not allowed to load local resource: file:///C:....jpg" Java EE Tomcat

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

What is the jQuery plugin that can search for elements and display them in real-time within a DIV?

Currently, I am in search of a jQuery plugin that can assist me with the following: Ability to have an input field for user search text Search through my elements and display only those that match the search string entered by the user. Essentially creati ...

jqueryhtmlsearchpluginsnavigation

Is there a way for me to determine the quality of a video and learn how to adjust it?

(function(){ var url = "http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd"; var player = dashjs.MediaPlayer().create(); player.initialize(document.querySelector("#videoPlayer"), url, })(); var bitrates = player.getBitrateInfoListFor("vid ...

javascripthtmlmpeg-dashdash.js

The alignment feature in the center is malfunctioning

I'm currently utilizing jQuery Mobile and have the following HTML along with CSS: .ui-grid-a { padding: 0; margin: 0; margin-top: 15px; height: 380px; } .ui-block-a, .ui-block-b { padding: 0; margin: 0; height: 33.3%; } .ui-block-a a, .ui-block ...

jqueryhtmlcssjquery-mobile

The Safari browser displays the mobile-friendly version of the website

Everything appears correctly when looking at the website in Firefox and Chrome. However, Safari is displaying the mobile version of the site instead. I did not make any CSS changes specifically for desktop screens while working on the responsive design for ...

cssmobilesafariscreen

Align a block vertically

Is there a way to perfectly center a div vertically? There are plenty of methods for horizontal alignment, but no matter what I attempt, getting vertical centering proves to be a challenge. body { vertical-align: middle;} No effect body {text-align ...

cssxhtml

What is the best way to include overflow-hidden in the image displayed by the tailblock component?

I have implemented the following Tailblock component, which is built on tailwind.css. My goal is to achieve a hover effect where the image scales up within its original dimensions. I want the image to zoom in without changing its height and width. I atte ...

htmlcsstailwind-csstailwind-ui

When the mouse leaves, the input search will automatically change the text color to black

I'm having trouble developing a search input, as I am facing an issue and unable to find a solution. Currently, the search input is working fine; when I click on it, it expands. However, once expanded and I start typing, the text color turns white wh ...

htmlcss

Utilizing Tailwind CSS for creating a responsive layout on a Next.js application

I'm just getting started with Tailwind CSS and I decided to build the user interface of my nextjs application using a "mobile first" approach like everyone suggests. I got the flex direction and background color working perfectly on mobile screens, so ...

htmlcssreactjsnext.jstailwind-css

What is the best way to format PHP emailed content from a web form?

Currently, I am working on a web contact page and facing an issue where the emails being sent arrive as plain text. I would like to enhance them by adding a background, incorporating the organization's logo, and styling the text to align with the webs ...

phphtmlcssemailcontact-form

Incorporating JavaScript to dynamically load an HTML page into an iframe

I am attempting to have each option load a unique page within a frame <!DOCTYPE html> <html> <head> <script> function selectCountry() { var mylist=document.getElementById("country"); document.getElementById("frame").src=mylist.opti ...

javascripthtmliframe

Ways to showcase a list in 3 columns on larger screens and 1 column on smaller screens

When viewing on a computer, my list appears like this: However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, and here is a snippet of my code: ...

javascriptcsssizescreen

What is the best way to add a border to the <map coordinates>?

Is there a way to add a border around the active link section of an image defined by coordinates? I have been able to show an outline when the user clicks using outline-color and href, but now I need a default border around the specified coordinates. I am ...

htmlcssimagemap

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-ic ...

htmlcssangularflexbox

Grails is experiencing a surge of duplicate events being triggered simultaneously

In my _test.gsp layout, I have a 'click event' that is triggered when the layout is rendered as shown below. <div id="testid"> <g:render template="test"/> </div> When I click on the event in the _test.gsp layout, it trigge ...

javascriptjqueryhtmlgrails

Reasons for dividing by 1 in JavaScript

While completing a basic programming assignment from my teacher, I encountered an interesting issue in Javascript. I found that when dividing a number by 1, it returns an unexpected value. Can anyone provide an explanation for this? I have created a jsfidd ...

javascripthtmlmath

Creating a perfectly centered square canvas on your screen

In the game I'm developing, I need to position a canvas at the center of the screen. The canvas should have equal width and height, covering the entire screen without overflowing, essentially creating a square shape. Is there a way to achieve this us ...

htmlcsscanvascenter

Move your cursor over an image to reveal another image on top without impacting the image underneath by using background-image

Is there a way to create an effect where hovering over a specific book image will display a checkmark, indicating selection upon click? Ideally, users should be able to press alt (cmd on mac) to select multiple books simultaneously. Check out the HTML bel ...

htmlcsshoverbackground-image

Tips for effectively managing the timeout of server-side AJAX calls1. Maxim

I'm currently developing server code in ASP.NET with the MVC framework. The client-side code is written in javascript. When sending an AJAX request from the browser to the server, whether using JQuery or not, timeouts can be set. Additionally, the br ...

javascriptajaxasp.net-mvcazureazure-web-app-service

Incorrect CSS percentage calculations detected on mobile devices

My webpage consists of three large containers, each with an alpha transparent background. While they display correctly on desktop browsers, I'm facing alignment issues on tablets (both iOS and Android) and iPhones where the percentage sum seems to be ...

htmlioscss

What is the best way to vertically center elements within a navigation bar?

I'm currently working on a React application and I am trying to create a navigation bar. However, I am encountering some difficulties with aligning the elements in the middle of the nav bar layout. You can see the issue depicted in the image at this l ...

htmlcss