Sorry, but I am very frustrated, I just want to insert a picture into my website.
<img src="example.jpg" alt="Example"/>
The file is in the same directory as the html.
What is wrong with that????????????
file tree:
Still it does not work :(
Edit:
./example.jpg does not work either ! :(
It just shows the alt... :(
Edit:
Seems like the problem comes from the CS50 IDE! I will try to upload the image to another website and then acces it :/
The tag is correct, but make sure that Example.jpg is in the same exact folder as the html file and check the file name and its extension too (it's case sensetive)
Bro, first check if the image you want is really on the same folder you're working on it and then:
<img src="./example.jpg" alt="Example" />
<img src="./example.jpg" alt="Example" />
you can also use picture tag in html like:
<picture>
<source media="(min-width:650px)" srcset="./example.jpg">
<source media="(min-width:465px)" srcset="./example01.jpg">
<img src="./example02.jpg" alt="Flowers" style="width:auto;">
</picture>
or you can have a simple div and add the picture using css like:
div {
background-image: url(./example.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh; //change it to what you like
width: 100vw; //change it to what you like
}
Related
My HTML code is not displaying the image. I have tried a lot of times.
<img style="width: 200px; height: 200px;" src="../static/aircondition.jpg" alt="Air Condition">
Output
Please check if your provided src directory is correct or not
I am trying to add an image as a sign in button to my website's header. When a user clicks/taps the button, it redirects them to the sign in page. I'm creating a ruby on rails app, and my image is located in "app/assets/images", but I can't seem to get my image to appear.
And I do not want to upload the image to a site such as imgur and link it to my site.
Here is what I've tried so far.
Attempting to link with CSS:
1) background-image: url(../images/sign-in.png) no-repeat;
2) background: url(sigin-in.png);
And I've tried getting it to work with display: block; width:128px; height:128px; position: relative;
Attempting to link with HTML:
<a type="button" class="navbar-toggle btn-signin">
<img class="signin-img" scr="../images/sign-in.png">
</a>
Note: I've tried other methods in HTML too, such as creating <button> tags,<div> tags and<a> tags.
It's a ".png" image, does that play a factor for not appearing?
Try changing the src value of your image to ../../assets/images/sign-in.png.
Your full image element should look like this:
<img class="signin-img" src="../../assets/images/sign-in.png">
Here you are mixing backgound-image and background-repeat:
background-image: url(../images/sign-in.png) no-repeat;
this should be:
background: url(../images/sign-in.png) no-repeat;
Also, in some RoR apps, using MVC pattern, the assets are being referenced from the root level of the app, so you might have to change the paths to the files.
probably you could try removing the "../"?
do you have any other images that are being correctly displayed?
good luck!
I solved the issue! I figured it had something to do with rails, since this only happens when I make rails apps/sites.
Since my html file is erb (embedded ruby), I had to "embed" the image in my html like this:
<img src="<%= asset_path( 'sign-in.png' ) %>" />
Thank you to everyone who answered!
First, make sure it's src not scr.
<img class="signin-img" scr="../images/sign-in.png"> # bad
<img class="signin-img" src="../images/sign-in.png"> # good
Second, open up developer tools (https://developer.chrome.com/devtools) and see if the browser is requesting the image:
images/sign-in.png
It will look like this: (make sure you're in the network tab)
I am having trouble displaying my image file on my localhost web server. I have added the html <img> tag without any typo error but still i cant view my image.
Below is my html code for the image:
<div id="circle">
<img src="img/profile.png" alt="photo">
</div>
This is my CSS code:
#circle {
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
text-align: center;
}
#cirlce img {
display: block;
min-width: 100%;
min-height: 100%;
}
U can use this
<div id="circle">
<img src="./img/profile.png" alt="photo">
</div>
you should begin your address from inside of your main folder of your project.
for example, if the main folder of your project is called 'project', and all other folders and files are placed in this folder, and your 'img' folder is also here, your addressing is true, otherwise you must change it and begin from the place I said.
hope it helps ...
Can you try replacing the src value from profile.png to the URL link hosted in public server
http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png
If loaded successfully , where is your image located.As per the existing code , profile.png should be placed along with index.html file. Else create a new folder 'images' and paste the profile.png there, changing the src value to the image folder location
<img src="images/profile.png" alt="photo">
EDIT1:
Also make sure windows is not appending the file format to the image. It should be profile.png , windows by default appends.png which eventually becomes profile.png.png thus not fail to load the image
Your source path is not correct replace <img src="img/profile.png" alt="photo"> with <img src=".img/profile.png" alt="photo">
I have solved the problem.. It was with the web server problem.. So now it's working
in html image and gif are set as same way. so i use same way in thymeleaf
In thymeleaf the image set as
<img th:attr="src=#{${ball.png}} , title=#{background}, alt=#{background}" style="width: 150px; height: 150px;" />
same as the gif image set as
<img th:attr="src=#{${run.gif}} , title=#{background}, alt=#{background}" style="width: 150px; height: 150px;" />
the image will show there but gif image not shows there
i don't know why this happening.
if you know the answer please share here.
#{${run.gif}} tries to URL rewrite with the property gif of an attribute run, which I doubt there is.
You should do #{/run.gif} if you want to refer to the image relatively to your context.
Documentation: Thymeleaf URL Syntax
I have 3 different sizes for the same image.
Can I achieve something like the following:
<img src='/path/to/image.jpg'></img>
<img src='/path/to/image.jpg?small'></img>
<img src='/path/to/image.jpg?large'></img>
I have tried the above but it instead shows image.jpg
The browser doesn't understand what you're trying to do. Why not append the size to the end of the image, like so:
<img src='/path/to/image.jpg></img>
<img src='/path/to/image.jpg_small></img>
<img src='/path/to/image.jpg_large></img>
I would suggest to keep the same image and add some css style to each one, instead of calling the same image 3 times from it path something like:
html code
<div>
<img src="/path/image.jpg" width="100" height="100">
</div>
<div id="scale-up" style="height: 230px">
<img src="/path/image.jpg">
</div>
<div id="scale-down" style="height: 57px">
<img src="/path/image.jpg">
css code
img {
vertical-align: middle;
height: 100%;
}
#scale-up {
height: 230px;
}
#scale-down {
height: 57px;
}
If you want filenames to look like (on server):
fd11f91bb8361030bdc09d8b8ed4f88e?w=200&h=76&f=png
You need to url encode them when requesting to server. For example using http://meyerweb.com/eric/tools/dencoder/
So url encoded file will look like:
fd11f91bb8361030bdc09d8b8ed4f88e%3Fw%3D200%26h%3D76%26f%3Dpng
So in your case it should be:
<img src='/path/to/image.jpg'></img>
<img src='/path/to/image.jpg%3Fsmall'></img>
<img src='/path/to/image.jpg%3Flarge'></img>
Like #Leo mentioned, using html-tags (or css) is much easier here than a url-based approach. (which would require server logic)
The html-tag resizing would look like:
<img src="/path/to/image.jpg" width="100" height="100">
You mention that you dislike how that might increase the bandwidth usage. This shouldn't be a problem as long as your website uses caching on the images. (it will only download the image once then, and just resize the same image locally for the different tags)
I would suggest
<img src="/path/to/image.jpg"></img>
<img src="/path/to/image_small.jpg"></img>
<img src="/path/to/image_large.jpg"></img>
to keep the file extension.