would appreciate some help here, my img html tag has the correct file path. However, when I launch the express server and try to view the image on vscod Browser Preview, I cannot see it (example picture in the link below). What could be the problem?
<div class="dashboard"><!--Dashboard START-->
<section class="navigation"><!--Navigation START-->
<img src="imgs/iHome.png" alt="">
</section><!--Navigation END-->
This is a picture of the html file along with the directories on the left and the html img tag in the middle, and the Browser Preview with the missing image on the right
The App needs a src folder that has a sub folder assets. your Frontend js should be hosted in the src folder.
put your image in the src -> assets -> images/pic01.jpeg
then call it like this:
<img src="assets/images/pic01.png" alt="">
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'm making a Landing page and I want to put there some png images links but they don't show. When I set png as background image I saw it on the page but casual <img>doesnt work. Path of the file is okay, I'm sure of that, but console says "404 file not found".When I'm using exactly the same path as bg image it works perfectly I don't know why... I'm writing styles in SCSS and using components for different parts of the site if it matters.
Plz help I'm new T.T
here are the links
<div id='media'>
<a target='_blank' href="https://en.wikipedia.org/wiki/Facebook">
<img src="/src/images/facebook.png" alt="ikona facebooka">
</a>
<a target="_blank" href="https://pl.wikipedia.org/wiki/LinkedIn">
<img src="/src/images/linkedin.png" alt="ikona linkedin">
</a>
</div>
and structures of my folders looks like that:
./src:
../fonts
../images<--here are the png files
../js
../sass
../templates:
.../components
...index.html
./web:
../css
../images
..index.html
Your styles.css file is located in a different place than your template files so the path SHOULD be different.
From your stylesheet location
web/css/style.css -> ../../src/images/filename.png
From your template location
src/templates/index.html -> ../../web/images/filename.png
Here's what to do to troubleshoot file paths:
Open dev tools => network tab (select images in your case)
Look for the file in question
If it's 404ing your path could be bad.
Try to load your image in a new browser tab with the full URL path you THINK it should be. (make sure it's serving properly)
Then check that full/serving file URL against the URL in your code
Is this a WordPress site? If so make sure to output the full path with
<?php bloginfo('template_directory'); ?>/path/filename.jpg
Remove the '/' from the beginning of the image path.
So change this:
<img src="/src/images/facebook.png" alt="ikona facebooka">
To this:
<img src="src/images/facebook.png" alt="ikona facebooka">
I'm pretty new to HTML and I'm trying to add some images to my page. Images are located in a subfolder , but two subfolders won't work:
<img id="lungIcon" src="icon/red/001-medical.svg">
<img id="liverIcon" src="icon/003-human-liver.svg">
liverIcon is show, but lungIcon not. red is a subfolder of icon and my editor (WebStorm) even autofills the src of lungIcon because it can find the file.
Inside the icon folder
As you can see red is inside icon. red contains the same files as icon but in a different color. Why won't lungIcon.svg display?
Try using relative path (`./your/path/to/img) eg:
<img id="lungIcon" src="./icon/red/001-medical.svg">
<img id="liverIcon" src="./icon/003-human-liver.svg">
Or try using full path. like src="/images/icon.svg", that's how I do mine.
I am working on a project with a file manager(dropbox like), and i am using handlebars template to show each file that i am uploading into a div.
the problem is that i want to show a preview of the file in the web page but at this moment only images are showing. is there any other tags i could replace img with?
<div class="file">
<a href="{{upload.url}}" target="_blank">
<span class="corner"></span>
<div class="image">
<img alt="image" class="img-responsive" src="{{upload.url}}">
</div>
i am trying to replace the img alt to show a preview of a file (pdf, text, ect)
I think you could use an iframe like this.
<iframe src="{{upload.url}}"></iframe>
I am learning Foundation framework and I have some problems with my code. I am trying to output images for different devices (mobile, tablet and desk) but when i write my code (path to the images is correct - checked few times...) and try to view the outcome in localhost i cannot see my images on the screen. Lets say i go localhost/foundation and when i inspect dev. tools on chrome sub menu: Sources my IMG folder is not shown there but it is actually inside my foundation folder.
here is my code that I am trying to run:
<header>
<div class="row">
<div class="column">
<div class="logo" data-interchange="[img/logoS.png, (default)],[img/logoM.png, (medium)],[img/logoL.png, (large)]">test</div>
</div>
</div>
</header>
Example of my problem
So you can see that the folder Images is missing so I cannot add reference to it and output my images but actually the folder is in place...
In your print screen, your image folder is named as "images" and in your code is "img". Check this.