I created a simple html file which should display svg image:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<img src="D:/Angular/hello-world/node_modules/bootstrap-icons/icons/star.svg">
</body>
</html>
It displays fine in Google Chrome but Firefox displays nothing at all but that's another issue...
When I'm running exactly the same code but in an Angular project inside index.html Google Chrome shows the "couldn't load" image. Does somebody know why in a pure html file it works but when running from Angular project it stops? And why firefox displays nothing?
For an Angular app, images need to be in a specific folder for it to be able to find said images. Move (or copy) the image to src/assets and use the path assets/star.svg.
Related
I have started studying web development and decided to use VS Code. It is currently running on a Linux Mint dist (19.03). Decided to add some extensions, including Live Server so I don't need to constantly hit F5 to see the changes. Problem is: I inserted an image on my html page and if I open the page through Live Server, the picture just doesn't show up, but if I go to the HTML file and open it, it shows perfectly. Could someone help me with this issue? Thank you! I am leaving the code here so you can have a look:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOM</title>
</head>
<script src="dom.js"></script>
<body>
<img src="/../HTML/me.jpg" />
</body>
</html>
/../ in the img src tag does not look correct.
First off, sorry to be asking this as I know it's a common question/problem brought up on here - but after researching and looking at the other threads and trying to apply those solutions I'm still at a loss. Hoping that by posting my code I can get the help I need. Thank you in advance.
As it says in the subject line I cannot get the .css file to link to the .html file. I'm a few days into learning via modules on LinkedIn and this code actually comes from one of those modules, making it more confusing that it's not working. Both the html and css file are in the same folder on my desktop, and I've quadruple checked that the .css file is the correct name. Here's the top part of the code with the problem area:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mat Alano-Martin Test Page</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
CSS is perfectly loading on the offline webpage (localhost) but on the live website, CSS is not loading.
I am using hosting and domain from the biz.nf website.
I used bootstrap 4 on this website.
My index.html head code:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.site.c1.biz/css/style.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
I saw your website in the inspect mode
its showing style.css is 403 forbidden in the network tab
Check with it
you can check here ERROR 403 in loading resources like CSS and JS in my index.php
Maybe you try using relative css path or check your webserver configuration, because loading the CSS file returned a 403 forbidden error code.
Finnaly I figured it out,
The problem was caused because my images was not in the same directory as of index.html
I tried many things.
Webpage inspect was throwing some error like - anime.min.js error in front of img name which was completely useless.
Many said it as a broken img but it's a different issue.
I am trying to create a webcomponent that includes the forge viewer. Im sadly running into an issue where the forge viewer fails to properly load the lmvworker and the allstrings.json
It looks like the viewer has problems loading them when used into a webcomponent: viewer3D.js:40122 GET https://stacksnippets.net/lmvworker.js 404 (Not Found)
The viewer is fetched from developer.api.autodesk.com
To properly see the error open the inspector.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Core</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.14/webcomponents-hi.js"></script>
<link rel="import" href="https://raw.githubusercontent.com/zedero/forge-webcomponent/master/bim.html">
</head>
<body>
<bim-viewer></bim-viewer>
</body>
</html>
Webcomponentjs still new to me, but manually loading lmvworker.js causes some problems. Can you try removing this line?
Ok so recently I started building a website and I realized that I needed a favicon so I made one put it in a favicon generator got it out and I have tried linking to it, and just plain inserting the image in the head but I can't seem to get it to work. It is a 16x16 photo saved as favicon.ico It still won't show up? it's in the same folder as my html along with the rest of the website do I need to put "http://favicon.com" instead I have tried using the debugger and network inspector but it won't acknowledge that's it there could it be the photo itself because I made it in illustrator then made it a jpg in photoshop?
Here's my code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="resume, mason britt, portfolio">
<link rel="shortcut icon" href="favicon.ico">
</head>