When I use the 'Live Server' Extension in VS Code my website looks great.
I deployed on vercel and the only thing showing are my social media buttons and the footer. Everything in between are 'alt=""' broken images. (alt="" being an example of course.)
An example of one of the lines:
<div class="container" id="roadmap">
<img class="center" src="/public/images/Roadmap Button.png"
alt="roadmap" style="width: 50%;height: 100%; margin-left:
25%;">
<img class="w-100" src="/public/images/Roadmap.png"
alt="roadmap">
</div>
My index.html, styles.css, and images folder is all in the public folder. Once again, on local server everything looks great, but when I deploy it, everything works great except for the images. They just won't show. Only the alt tag will (alt="").
I also cleared my cache, and looked on different browsers and devices. Same thing. Any help on this would be greatly appreciated. I am somewhat a beginner at this still. So I am going for more of a static/navigational website.
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 have a simple html page :
#my_svg{
width: 75px;
height: auto
}
<a href="#">
<div id="my_svg">
<img src="https://svgshare.com/i/MHB.svg" alt="English flag">
</div>
</a>
All I see is English flag so it seems like my svg is not loading. I'm sure about the path because I have the image as png on the same folder and it's working well. Just changing the extension.
The weird part is that I don't have any 404 error in my console. It's working when I add it throught the link https://svgshare.com/i/MHB.svg but when I use the local file it doesn't work. On my side I don't have any webserver and don't want
So your problem is its not working on the local file right? I think it will work if you use <img src="./flag.svg" alt="English Flag'>. That should work, sometimes not adding "./" on the src attribute will have issues because the browser might think it is a web link, not a path link.
I should note that the website I'm working on is meant to be pretty simple.
The way I have my website files organized is that under one folder containing the entire website, I have the .html file for the home page, which contains links to different pages inside it for photos, videos, etc. Each of these pages have their own folders.
Attached here is the code I have for one of these pages, meant for my photos. I learned from this thread (Link not going back to home page) that if you just have:
Home
That the link will take you back to the index/root directory.
(Is this different from the home page? Sorry, I'm a noob.)
Although, when I originally had it has just the code above, the link takes me to this weird gray page that just shows all of the files of my website (is that root place or whatever it's called?).
Although, I see that I'm able to from there just simply add the .html file for my home page in that link directory, so the code I have now seems to work.
Is this an okay way to have a link to go back to the home page? Thank you for your time.
<!DOCTYPE html>
<html>
<style>
div.img {
display: inline;
max-width: 650px;
}
</style>
<body>
<div> <!--Home Button-->
<a href="/homepage.html" style="float: right; margin-right: 100px;">
Home
</a>
</div>
<div class="img">
<img src="1.jpg" width="384px;" height="384px;">
<img src="2.png" width="384px;" height="384px;">
<img src="3.png" width="384px;" height="384px;">
<img src="4.JPG" width="384px;" height="384px;">
<img src="5.png" width="384px;" height="384px;">
</div>
</body>
</html>
If it works and you are okay with having the path /homepage.html as your home page, then it is a perfectly good and logical way of linking back to the home page.
As Kei mentioned in the comment, it is highly advisable to rename this file to index.html as most web servers and browsers will default to this file name as the root. For a lot of people, it's more desirable to just go to a domain (ie: mydomain.com) as the home page, rather than having to type in mydomain.com/homepage.html.
All this to say, if you rename your home page file to index.html and serve this website through a web server of some sort (Apache for example), then you can simply use / as a path and it will bring you directly to the home page. I know that you mentioned that you are a beginner, so this may be slightly outside of the scope of what you are asking, but just letting you know for the future. Good luck!
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 have my image placed in a folder called images in the netbeans web pages folder and the link to it in my jsp is in a div as shown below:
<div id="image">
<p>
<img src="${pageContext.request.contextPath}/images/vote_image.GIF"
alt="banner"
width=600px
height=300px
/>
</p>
</div><!--end of image div-->
The problem is the image just doesn't load in the browser. What could be the problem? I used the same code in linux and it used to load the image. Could it be a browser problem, I'm using firefox 3.6 which I don't think should have a problem. Please let me know if any one has a clue as to why this is happening. If the problem is my code let me know how to adjust. Thank you
There are no units used in HTML width and height attributes.
<img src="${pageContext.request.contextPath}/images/vote_image.GIF"
alt="banner"
width="600"
height="300"
/>
Without seeing the rendered source of the page, I'd guess that's your problem. If not, try inspecting your image in Firebug and post what its rendered source looks like.
Also, make sure case sensitivity is not in play: gif vs. GIF.