I have a menu component html (src/menu/menucomponent) that exhibits images from a folder (src/assets/images/image.png) for the main nav when being viewed on a computer. Then I have a sidenav that is shown when on a mobile device.
The code is :
<div id='main'>
<span class="hamburger" *ngIf="isMobile" (click)="openNav()">☰</span>
These images appear both locally and globally. Then I have the following:
<div id='mySidenav' class='sidenav'*ngIf="isMobile">
×
<a href=".#/welcome" >Home</a>
<a href=".#/aboutme" >About Me</a>
<a href=".#/projects" >Projects</a>
<a href=".#/contactme" >Contact</a>
Subscribe
<img src="../assets/images/Image1.png">
<img src="../assets/images/Image2.png">
<img src="../assets/images/Image3.png">
<img src="../assets/images/Image4.png" >
These images appear locally but once hosted on a server, do not show, but the links still work. I have double-checked that they are in the same images folder and that they are the right image names.
Does anyone have some ideas?
The assets folder is copied to the dist when you compile the app.
So, you change your sources to:
<img src="./assets/images/Image1.png">
The ng serve can still figure out where the files are when you are testing locally.
Related
I am updating my online portfolio with a new website (I grabbed a template off Free-Css.com). When I preview it, it works fine. Once I deploy the website via Firebase, none of my images appear.
All of the images are in the public folder, which is where my hosting is set to. Here is an example of one of the images:
<div class="col-md-6 about-img-div">
<!-- <div class="about-border" data-aos="fade-up" data-aos-delay=".5"></div> -->
<img src="Headshot.jpg" width="400" class="img-responsive" alt="" align="right" data-aos="fade-right" data-aos-delay="0" />
Even if I use the pull pathname, the images still do not appear. Please note that they do appear if I just open the HTML file, but not while deployed. What am I doing wrong? Here is the website: https://evanmny.com
I'm not sure how you create/generate the HTML, but when I look at the network tab when loading your site in a browser I see it tries to read this URL:
https://evanmny.com/Users/evanmullen/Public/city.jpg
That should be:
https://evanmny.com/city.jpg
I am a student who is making an app for my group's STEAM Tank project. I can't figure out how to make a button link go to another HTML file in chrome-dev tools. I am working in an index.html file to make the title page. This is the code I have:
<img src="2icon_128.png" alt="Tardy Time logo" width="400" id="tardy-time-logo">
<h1 id="tardy-time-heading">Tardy Time</h1>
<h2 class="tardy-time-slogan"><strong><em>If you can't beat Tardy Time, Join Tardy Time</em></strong></h2>
<div class="header">
<span class="title-btn"><a target="_blank" href="file:///home/chronos/u-e6b8f2a6cde1e9636abef34ef65d593e08bdd9e8/MyFiles/Downloads/Tardy-Time-App/beginning.html" class="title-btn">Let's Start</a></span>
</div>
I need to get to a file called beginning.html, which is located inside the same folder, "Tardy-Time-App". The error I am getting is the not allowed to load local resource error. I am working in chrome devtools.
Is you're in the same folder just pass the name of your file like this:
<a target="_blank" href="beginning.html" class="title-btn">Let's Start</a>
So you don't need to pass the absolute path of your file
I am trying to make my logo clickable to go back to the homepage but can't seem to get it to work.
Any help appreciated...
<!-- logo begin -->
<div id="logo">
<a href="index.html">
<img class="logo logo_dark_bg" src="images/logo.png" alt="/">
<img class="logo logo_light_bg" src="images/logo_light.png" alt="/">
</a>
</div>
<!-- logo close -->
Your anchor currently work only from the root so you should update your reference to be from the root as well, so href="/index.html" note the starting "/". The Same applies to your src links:
<div id="logo">
<a href="/index.html">
<img class="logo logo_dark_bg" src="/images/logo.png" alt="logo">
<img class="logo logo_light_bg" src="/images/logo_light.png" alt="logo">
</a>
</div>
Starting an anchor link with a / means it sources from the root so that wherever the above code is based (such as in site.com/currentfolder/file.html) it will always connect with your home page which would typically be found in site.com/index.html.
Currently (without the leading /) the anchor link is looking for site.com/currentfolder/index.html which is almost certainly looking for a file which is not the welcome or home page.
Update
Also you need to ensure that the home page file does actually exist. Typically in your case the home pages may be /index.htm rather than /index.html. Please ensure that the file with the correct filetype HTML reference (.html or .htm) exists and is referenced correctly.
Summary Issues
Anchor href file should be absolute reference starting with /
Anchor href file must exist, with the correct filetype (.html or .htm, etc.).
image src should be absolute reference (starting /).
image alt should be the website name and/or logo description.
this is pretty basic but I can't figure out why my image won't render. The broken image icon doesn't appear and I'm viewing my page on localhost. I'm not sure how to upload a screen shot but I've played with the relative path in many ways and can't figure out the problem. When I link to an online image it renders. I'm using rails/foundation currently but I actually had the same problem using a MEAN stack a couple weeks ago. The issue seems to be only when using a server. Any help is appreciated, thanks. EDIT: my views and assets folder are at the same level (siblings?) views path: app/views/projects/home.html.erb. images path: app/assets/images/volvo.jpg; I've selected the image file and done 'copy relative path' and played with it every which way. I don't think it's the path but who knows.
<h4>pic below</h4>
<img src"../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src"assets/images/bmw.jpg"/>
<img src"../../assets/images/volvo.jpg"/>
<img src"saab.jpg"/>
<img src"../../assets/images/saabtwo.jpg"/>
</li>
</ul>
You are defining your images incorrectly; you forgot the equals sign (=). You need to have src= instead of just src before the image path. This is because of the way the defining/setting of attributes works in html.
For your code, this would be:
<h4>pic below</h4>
<img src="../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src="assets/images/bmw.jpg"/>
<img src="../../assets/images/volvo.jpg"/>
<img src="saab.jpg"/>
<img src="../../assets/images/saabtwo.jpg"/>
</li>
</ul>
As a general rule, to define a style in html, you do this: attribute="value".
I've added a page link to a picture for my website, but it does not load the website because the link goes the directory therefore the webpages do not appear. My code is below:
<a href="www.w3schools.com">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
When I click on the image it says file not found.
If you're linking to a page on an external site, you will need to provide the entire URL of the page in question, which includes the protocol. In this instance, that would be http://www.w3schools.com/.
By linking to www.w3schools.com, you are telling the browser to load that URL relative to the page you're linking from so, if this link were on a page located at http://domain.tld/page.html, clicking on it would attempt to load http://domain.tld/www.w3schools.com.
Add http:// OR https:// for your website link:
<a href="http://www.w3schools.com/">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
<a href="http://www.w3schools.com" target="_blank">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
Without the http:// your link will be something like: youraddress/www.w3schools.com
And pay attention if you image is in the correct folder called Images