So close yet so far to finishing my site.
Can't for the life of me get assets to load on the web page. They work fine on the local host.
Have tried what feels like every combination of URL and baseurl.
Been working on it for the entire day and I want to tear my hair out.
Code: https://github.com/debrincat/dd_blog.git
Website: https://debrincat.github.io/dd_blog/
The images are not working as the image location is incorrect.
As in most of the places including the Error 404 page, the link is given wrong, as:
<a class="logo__link" href="deandebrincat/">Dean DeBrincat</a>
Instead you should have used,<a class="logo__link" href="/">Dean DeBrincat</a>
And for the images:Use <img src="/images/04-1.jpg" alt="Page not found"> instead of <img src="deandebrincat/images/04-1.jpg" alt="Page not found">
The issue is that the location of your images is at:
https://debrincat.github.io/dd_blog/images/p1.jpg
Where as your HTML is pointing to:
https://debrincat.github.io/dd_blog//images/p1.jpg
To fix this, in your you need to change each image to point to "images/p1.jpg" not "/p1/kitty.jpg".
When you put "/" before the link, it means an absolute path, which is the path in the highest directory of the project.
You want the relative path, so we deleted the first /.
Something wrong in html:
<img src="/images/p1.jpg" alt="Dean DeBrincat's Picture">
You can find this error by pressing F12 in the browser and clicking console
Related
Here is my repository
I read some people has problems with the file being in capital(i.e PNG) or .. and //, however mine does not have any of these. I even changed my image to jpg from png.
Your file is trying to access the images from the wrong place, if you look in the devtools you can see that the website is trying to find images here:
https://mfried95.github.io/images/illustration-dashboard.jpg
instead of here:
https://mfried95.github.io/Ping-validation/images/illustration-dashboard.jpg
You can change your image tags to no include the leading slash, so like this
<img src="images/illustration-dashboard.jpg" alt=""> instead of <img src="/images/illustration-dashboard.jpg" alt="">
I'd do a google search on how to configure relative paths with github pages, but for now this should do it.
I'm having an issue where only 1 of my images shows up when deploying to Heroku whereas all show up on localhost. The one that shows up is
<div class="hero-wrap ftco-degree-bg" style="background-image: url('images/bg_1.jpg');" data-stellar-background-ratio="0.5">
Where I'm pulling the image with url(), but every other instance where I try to do this in the code (three different attempts):
<a class="img" id="albumPhoto1" style="background-image: url('../images/greenPurplegrad.jpg');"></a>
<a class="img" id="albumPhoto2" style="background-image: url('./images/yellowPinkgrad.jpg');"></a>
<a class="img" id="albumPhoto3" style="background-image: url('images/pinkBluegrad.jpg');"></a>
But if I set the url as
style="background-image: url('images/bg_1.jpg");"
(the same as the first image that shows up) the image will show. Obviously I don't want all the same image, so I'd like some help in seeing where I went wrong.
Here's an image of the images folder to show I have all these images in the correct location:
Images Folder
Yes, all of them are .jpg
The web app can be found here: My Web App on Heroku
If you just press the search-icon, right below it some images (as seen above) should pop up, but they don't
EDIT:
Added image of file structure:
Public folder with HTML and images folder
EDIT 2:
Something weird to note is that if I change any image to the bg_1.jpg, it will show up, but if I change the section with bg_1.jpg to any other image, it won't show up on the background. So I believe my images may be corrupted somehow even though I can see them in the folder.
I believe it is because of a dynamic address, when you type "../image.jpg" or "image.jpg", you are defining a static address, this is practical for local application, but not for PHP .. .
I don't know exactly if this is the center of the problem, but try this: background: url ("/path/to/file/image.jpg")
when you type the first "/" you are taking the current file and having it search from this file.
Still unsure of what caused the inability to load every image but bg_1.jpg, but since Heroku has its ephemeral filesystem, I'm led to believe that the images are being deleted from the system since I cannot call on these images whereas bg_1.jpg is directly implemented in the program.
As such, I found an Online image holder + HTML to store the images for me and I directly and freshly call these images any time I need them with the url() css. This eliminates the need to have the images folder at all since they are now all online. If this is inconvenient, Heroku sponsors Amazon S3 to hold files as well (I think that's how it works?).
I hope this helps someone, but I don't believe anyone else has been having these types of issues with Heroku in a few years.
I have just started to learn about coding today. I'm learning from a video on Skillshare, which isn't probably the best but I guess it will work for the basics. I know that I am supposed to type this: <img src="image link"> but when I do it and refresh it it doesn't show up on the webpage. If I do it on this website it works. Tips?
Thank you in advance
First advice is to clear your browser cache, then try opening the broken image in a new tab or view source and check the image link to see if you have the path to your image entered correctly. Also sometimes the extension needs to be exact on some browsers jpg or png won't work if the file is written JPG or PNG.
Maybe you could post your code on the image link but I suspect the image path is incorrect or missing. <img src = "flower.jpg"> will look for the flower.jpg file in the same folder as where your html file is being stored. Browswer will look for different locations for the flower.jpg file for these examples : <img src = "\images\flower.jpg">, <img src = "http://www.nat.com/flower.jpg">, the former it will look for a sub-directory called images from the current directory. The final example allows you to get the image file directly from a URL if you know such a file exists.
Hi as stated <img src="image link"> is not working due to several reason such as incorrect path. Normally the html will look to the direct path for html stored location to find the image.
Example will be <img src="test.png"> if file does not exist named test.png it will return broken image such as like this now back to your question you have stated that
If I do it on this website it works
this is because the website have already have a image in the server name according to your <img src="image link"> that is why it is working inside the website. Hope this explanation answered your question good luck.
On my webpage www.example.com I display images next to texts. Some pictures of the folder "minipics" are not getting displayed.
Path in HTML:
<img src="minipics/m_5b56aa7040b4f1224ee19c17b6f73ab1.jpg" alt="">
However: Opening the image directly in the browser via "www.example.com/minipics/m_5b56aa7040b4f1224ee19c17b6f73ab1.jpg" works!
What is strange: When I after having opened the picture directly via the absolute path (as described above) reload the page on which I expect the images to show up, the picture that I just opened directly gets displayed. But only this picture, NOT the other ones.
Only some pictures that are contained in the folder "minipics" do not get displayed. For example, those pictures uploaded via a new picture upload do get displayed.
Can anybody see a solution to this problem?
you can try to add a slash ( / ) to the file path.
In your url the folder is in the document root. If your file isn't, this can help.
<img src="/minipics/m_5b56aa7040b4f1224ee19c17b6f73ab1.jpg" alt="">
If your folder structure is like below
index.html
minipics
m_5b56aa7040b4f1224ee19c17b6f73ab1.jpg
Then change the code to below
<img src="./minipics/m_5b56aa7040b4f1224ee19c17b6f73ab1.jpg" alt="">
./ means current folder.
Hope this will help you.
Im at a loss with this, im creating a mobile version of my website with jquery, but my images are refusing to load with img src tag.
<img src="images/me.jpg" width="200" height="267" alt="me">
ive tried using to load my image straight from my website but they're refusing to load also, and moving the image to the same directory as the web page, but still nothing. I just get a box the size of the width and height with the alt text and an image icon in the middle.
I just don't understand whats wrong with it.
thanks in advance.
Try to work with the full path as:
<img src="http://www.yourdomain.com/images/me.jpg" width="200" height="267" alt="me">
For test purpose just open http://www.yourdomain.com/images/me.jpg and you should see the image. If it does not work, there must be a compatibility issue with your html/jquery. Just post the rest of your html file and tell us about the jquery plugin(s) you are using ...
My images were in fact corrupt or not working properly as I couldn't open them in Photoshop, I had to replace the images.
I have just had the same issue. It was capital letters in the filename. Some pictures were loading some weren't. Some pictures had uppercase .JPG file extension, and some had lowercase .jpg. My HTML code referenced all of the images using lowercase .jpg.
I'm running webserver on my Synology DS.
I just started writing html last night so this is a total noob response because i just had the same problem, but if youre on a windows computer then your slashes in the file location should be back slashes instead of forward slashes
like i said- total noob but hope it helps
Make sure that you are in the right subdomain in case you are using dev, staging etc.
I was wondering too, until I figured out that I am on the staging domain where the image does not exist.
Also make sure to clear the cache.
If you try different things and it doesn't work, just move your image file to your working folder where your HTML file is.
The following works:
<img src="me.jpg" width="200" height="267" alt="me">
Be aware if you are using thymeleaf. Then you must have source like: (It by itself go through and do not take repository paths,...).
<div id="upperPart">
<img id="foxPicture" th:src="greenfox.png" height="200" width="200" alt="Green Fox logo"/>
<a class="Mr.Fox_description">This is Mr. Fox. Currently living on pizza and lemonade. He knows 2 tricks. </a>
</div>
One other possible cause is your server has a bug which has crashed it. When that happens, it will show the same error.
If your server auto-restarts on crashes, it can be difficult to reproduce this bug to fix it.
This happened to me while using PM2 with NodeJS.
List item
Just go the image location on your drive
select the image
open it using your favourite browser
go to url bar
copy the location from the url bar
use it in img src=(paste over here)
It will look something like this
img src="file:///C:/Users/Mercy/Documents/WEB%20DEVELOPMENT/HTML5/lion.jpg" alt="Lion profile picture" height="300" width="500"
I've solved my problem by replacing src="image.jpg" with src="file:///c:\FULL_PATH\image.jpg"