I have 2 images in html, one is shown, but the second one is not, I have tried to put another different image in the second one but it is still not shown. Both are in the same path.
<a class="navbar-brand" href="#">
<img id="borderIcono" th:src="#{/images/icono_prueba.png}" width="60" height="60" alt=""/></a>
<button ng-click="cargando = true" ng-disabled="cargando">
<img th:src="#{/images/redo.png}" class="redoBoton"/>
</button>
I have also tried to put the second image outside the button and without the class attribute, but it is still not displayed. So the css is not the problem.
I have tried to interchange them and the first one is seen where the second one is but the second one is still not seen in the place of the first one.
In inspect the browser tells me that the image could not be loaded.
I know that both images are in the same folder, so both should be accessible.
I found the bug, the server was not putting the image inside the compiled application, that is, I put the file in the source folder, but when I run it, it reads whatever is in the target folder.
Related
Basically, I would like to navigate to a page through an image, and on this new page it will contain the image clicked on. You're probably thinking I am stupid and there is a simple way but I would like to have a range of images that when clicked bring me to the same page but display ONLY the image clicked on.
Bit difficult to explain but hopefully you get what I am saying, I don't want a page for each image. I would like a Page that contains all the images but only displays the one that is clicked on the first "Home" page.
Thanks, the html I have for it ATM is below:
<img alt="Predators" src="Predators.jpg"
width="180" height="180">
</a><a href="Page2 - Mercurial Superfly.html">
<img alt="Mercurial Superfly" src="Mercurial-Superfly.jpg"
width="180" height="180">
</a><a href="Page2 - 99g.html">
<img alt="99g" src="99-gram-boots.jpg"
width="180" height="180">
</a><a href="Page2 - LimitedRonaldinho.html">
<img alt="LimitedEditionTiempo" src="Limited Edition Ronaldinho Tiempo.jpg"
width="180" height="180">
</a>```
So the href in the <a> tag is where it takes you. So if you want every image to take you to the same page use the same page name.(?) If you paste "https://www.google.com" in every href attribute every image will take you to Google. So instead of google you want to use your link.
If you want every picture to be displayed on one site depending on what was being clicked on I guess you'll need to use JavaScript. Your other website needs to know which image was clicked on.
I have this code in my new.php file, which is contained within a folder called contacts in my main website:
<a href="../index.html" id="header-link">
<img src="../images/menuslf100logo.png" id="header-img" />
</a>
When I go to the website and navigate to contacts/new.php and try to click the link, however, it shows up as contacts/index.html and breaks. Using inspect element, the code shows up like so:
<a href="index.html" id="header-link">
<img src="../images/menuslf100logo.png" id="header-img" />
</a>
I honestly have never seen this before. There are three other links in the header that use the same relative path format and they all work perfectly fine. It's just this one that is screwing with me. Has anybody seen this? Is there a fix for it? I've tried deleting the line, saving, and pasting it back in and saving again. No luck. Also tried going with an absolute path by removing the '..'. Didn't change anything. I then moved this link below the next link down just for fun but nothing happened.
Updated with image of file directory:
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.
So I have two separate HTML files. The first one holds a section with id="portfolio". The second one holds an a href. When I click the a href in the second HTML file I want to go to the first HTML file at the #porfolio section position. I know how to open the first HTML file from the a href. I also know how to get to the #porfolio section from the first HTML file. What I don't know is how can get to the #portfolio section in the first HTML file through the second HTML file. So how can I do that? Thanks in advance!
First HTML:
<section class="no-padding" id="portfolio">
...
</section>
Second HTML:
<a class="page-scroll" href="#portfolio">Portfolio</a>
This should work when included in second.html:
<a class="page-scroll" href="first.html#portfolio">Portfolio</a>
To clarify: you have 2 pages open in a webbrowser (the same webbrowser) and you want to jump back and forth between the 2 different pages, causing the web browser to change tabs/windows and re-display the requested page(s) at the anchor point you specify.
You need to talk to webbrowser and get it to do the work for you. The answer is browser specific.
I would start by creating child page (target='_blank') of original page and seeing what individual browsers allow you to get away with. Your mileage may vary, as they say.
I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />