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.
Related
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="">
I am a beginner with regards to CSS and HTML but have searched everywhere for a solution to this and still have no idea what is going on.
I am attempting to create a background image with a logo/subtitle on top of it. Although only the subtitle and alt text is showing up. I have gone over the syntax multiple times and am still unsure of where the error is as I am declaring the correct css specifications from what I can tell.
#HTML:
<div class="blog-type-wrapper">
<div class="blog-type-img-background" style="background-image:url(images/software.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/software-logo.png" alt="soft">
</div>
<div class="subtitle">
Software N Stuff
</div>
</div>
</div>
#CSS
.blog-type-img-background{
height:500px;
width:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
There is space on the web page allocated to the image, however no images appear. The images are in another folder named "images" in the same directory as both the html and css files. This is occurring in a PHP file, I have attempted researching if that makes a difference in comparison to HTML file, and have found nothing but I cannot see how it would make a difference with regards to this issue.
Edit
The file path was incorrect. Thank you to #Heretic Monkey and others
"Look at the Networking tab of your browser's developer tools and look for any errors, like a 404 with the image's file name. That will show the full URL to the image it's trying to load. It's likely incorrect, relative to the HTML file. Fix that"
After looking in the networking tab I realized that my file path was incorrect and changing it to style="background-image:url(wp-content/themes/my-theme/images/software.jpg)"> worked in loading the image as expected.
Change
style="background-image:url(images/software-logo.png)"
to
style="background-image: url('images/software-logo.png');"
Also, depending on where your images folder is located, you might need a / before, like this: /images/software-logo.png.
The result would be this:
<div class="blog-type-wrapper">
<div class="blog-type-img-background" style="background-image: url('images/software-logo.png');"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/software-logo.png" alt="soft">
</div>
<div class="subtitle">
Software N Stuff
</div>
</div>
</div>
Source should contain either /, ./, or ../:
In case the image folder is in the absolute root path, you should use /images/image.png
If it's in the same directory as the current file's location, then use ./images/image.png
If it's in an upper folder, use ../images/image.png
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 am trying to add a logo to my webpage. I am using CSS and eclipse. The image shows as a broken image and I am not sure why. The image I am trying to use is in the folder specified :
Does it need to be added in CSS or can someone please help me to know where I am wrong. Thank you.
<body>
<div class="jumbotron">
<h2 style="text-align: center; color: white;"> New Plan </h2>
<a href="#">
<img src="resources/img/logo.png">
</a>
</div>
</body>
This wouldn't be a css issue if the browser is showing the broken link icon. That icon means the path to the file is incorrect or it can't retrieve it.
To confirm this, take resources/img/logo.png and add it to the end of the URL where your HTML is, excluding any files. For instance, if your URL is http://example.com/index.php, you want to make the URL read as http://example.com/resources/img/logo.png, without the index.php.
You will need to tweak this URL until the image shows up in the browser, since you didn't provide a URL where the HTML is running. When that happens, the URL in the address bar is the one you can use for the image URL.
i am using html image like this
HTML :
<div class="home" style="background: #f2f2f2;">
<div class="pr_blank"></div>
<!-- <div id="now" class="show"> -->
<div class="ptgamebox">
<img src="../../images/ges.jpg" / ">
<!-- <em class="game_ro3d"></em> -->
<div class="game-name">test</div>
</div>
</div>
</div>
My images are in a folder like this D:\APP\images\pt\ges.jpg
Loaded Page Image :
now when i see in browser this image is being loaded but in console it shows error like this
file:///images/ges.jpg net::ERR_FILE_NOT_FOUND
Will someone help me whats wrong with it ?
Try this:
<img src="APP/images/pt/ges.jpg">
If this won't work,
change it like this:
<img src="images/ges.jpg"> or <img src="images/pt/ges.jpg">
Hope it helps.
Sometimes this error comes due to control characters... I also face this problem recently, no matters what path I gave (absolute or relative) error remains the same.
Finally I solved this by NOT COPY pasting PATH of image
Try to type your image's path by keyboard, you can also copy and paste once, tally the same code by typing and then remove the copy pasted one. Here you have some screenshots from my PC
This is how error looks likes in console
In this image, line no. 13 path is copy pasted, in line 14 I have typed it.... then remove the line 13
Finally image start appearing in browsers
This error means that file was not found.Either path is wrong or file is not present where you want it to be. Try to access it by entering source address in your browser to check if it really is there. Browse the directories on server to ensure the path is correct. You may even copy and paste the relative path to be certain it is alright.