This might be a really stupid question, but here goes nothing
Currently I have the following in my HTML:
<div class="disk-images">
<img src="../public/images/blueflame.png">
<img src="../public/images/purpleflamelogo.jpg">
</div>
I have not styled it in my CSS, but AFAIK, this should not be a problem, as the default style sheet should still take care of it.
I also know the path to these images is correct as, when I Ctrl + click on it in VSCode, it shows me the image.
This is what it shows instead:
This would suggest, that the path to the images are wrong, however, as previously stated, I do believe the path is correct. Any help would be greatly appreciated!
For people having the same problem in the future, the problem was with express and how static files in express work.
I had the following in my app.js
app.use( express.static( "public" ) );
which meant the root folder for my static assets was actually another directory.
You can read up on it here
you can check your console for any 404 messages, and try to close the whole project and re-open it in your editor and browser as you may working on an old version
relatively path is correct but the files in the public folder are static files such as index.html, javascript library files, images, and other assets, etc. Files in this folder are copied and pasted as they are directly into the build folder. Only files inside the public folder can be referenced from the HTML.
Updated code:
<div class="disk-images">
<img src="images/blueflame.png">
<img src="images/purpleflamelogo.jpg">
</div>
Related
I want to display the image from my local , but it is showing like this.
I don't understand what is wrong here!
The below img code i'm using in provider.js file
<img src='../../../public/icons/videoOn.png'/>
After looking at the screenshot, this looks like a React JS project. For static assets, you need to import them, but only when they're inside the src folder. If they're inside the public folder, you can do this:
<img src='/icons/videoOn.png' />
The above code should work for you. If you're deploying it to a non-root and should be safer, then use process.env.PUBLIC_URL:
<img src={process.env.PUBLIC_URL + '/icons/videoOn.png'} />
Don't use path as src, because it must be accessible via web.
Means you need src="http://example.com/public/icons/videoOn.png" or src="/public/icons/videoOn.png"
In that situation always check Network tab and see from where your browser tries to get file. You must be able to go to same URL and access file
I've been trying to resolve this issue with my website (www.wintonbrownmusic.online). I've attached a picture of how my site looks locally. When I upload it through GoDaddy, the site looks differently. I understand that others have had this issue but not sure where/how to change the CSS file to link to my website so it'll look the way that it should. Can someone assist?
I'm not sure what your hosting / creating it with, but I had a quick look at your site and found one issue.
Your HTML file is looking for the bootstrap.css file in the assets/css folder, but it appears to be in the root folder.
unless your hosting with something that is supposed to find it there.
not sure.
but when is use http://www.wintonbrownmusic.online/assets/css/bootstrap.css is doesn't work, but if I use http://www.wintonbrownmusic.online/bootstrap.css it does work.
hope that helps.
You have problems with path, If you open the console in inspect element it will show you that you have problems in calling the required files css, js, and other files.
You need to upload folders properly in the host, you need to add folders like you have in local folders in your computers. "assets" folder is missing and you just upload files inside there.
change your folder name as either assets or css ....
assets/css is a folder name because of the slash (/) browser looking for css folder inside assets folder...just give the folder
name correctly try to avoid usage of special character ,punctutation
in folder name
I added a project site to my Github project. But some photos are not displaying in the site.
Img code:
<img src="img/screenshot2.PNG" class="img-responsive" alt=""> </div>
folder structure (img is a folder):
img
Screenshot2.png
index.html
I tried with .png and .PNG (some earlier SO answers suggested it) and none of them work
Any solutions?
Nevermind, I solved it.
If anyone has the same problem.
GitHub Pages are case sensitive. Not only for folders, but also for image names.
Write what you see.
It is Screenshot2.png. With a lower-case png and a capital S at the start.
As #dnivog mentioned, GitHub's servers take a little time to update files.
If nothing of the above addresses your situation, just check back in a little while. ⏳
Adding my two cents for googlers: Git Pages seem to ignore the directories starting with underscore, so make sure you don't have <a href="_images/whatever.jpg">.
yes, i have the same problem
There are two most powerful ways to solve it
pay attention to the writing of image extensions, because on github pages Images.png is different from images.png
if in your code you write src on image like this src="/images/images.png" just remove / at the beginning of the section, and it will solve your problem.
While hosting a website on Github,I faced the same issue.The image file was saved as an .jpg extension on my local(in small letters) and It was working fine. I pushed the same to github. That did not work.
I had to change the extension to .JPG (in caps)since it was the original extension of the image.Github Pages are case sensitive to the name of the files being uploaded.
I had this problem today. I solved it by:
Double-check the Case Sensitive of the images (i.e. Screenshot.png isn't the same as Screenshot.PNG or even screenshot.png)
Double-check the PATH of the image. For me; It was ../img/myImg.jpg, and I changed it to ./img/myImg.jpg to point to the current directory of the project
After fixing the 2 mentioned issue above, it worked fine... Hope it help you get unstuck!
I had a folder on my laptop named "assets", but when I pushed to Github it became "Assets". I had to change it in my HTML so I could view the images on the Github page
The repo on my laptop:
The repo on GitHub:
I had a similar issue, except I used git-lfs to manage the images. GitHub Pages doesn't support LFS, which will prevent the image from being displayed.
I tried using both JPG or jpg but it didn't work.
I tried below steps and it worked fine.
Try using the complete path. Let's say your image is inside repo-name/img/pic.jpg. Then use https://username.github.io/repo-name/img/pic.jpg instead of just /img/pic.jpg.
for anyone still scrolling through the answers:
do the following steps:
Make sure the image has actually been uploaded on your remote. On your main repo page , click on the name of the image, and see if it opens: if yes continue to next step
Load the site with "Github pages"
Open up inspect element (DevTools) , go to the html element in your .html file OR your CSS Style where you have defined your src
Here try out all the various solutions that people have described above [what worked for me: I added ./to the beginning of my src => ./name-image
whichever solution works, make that change in your local html or CSS and push to github.
I had this exact same problem, GitHub Pages appears to be case-sensitive for images, and I wrote .JPG instead of .jpg, once I changed my image extension to be lowercase it worked.
I struggled quite a while until I saw one post by Elharony: https://stackoverflow.com/users/5560399/elharony
talking about case sensitivity. It turned out Jupyter notebook is case insensitive for image files, but GitHub is. That solved my problem.
If you are importing file into your JS file and using relative path.
Remember to have the relative path from the HTML file and not from JS file as it'll finally compile into the HTML file only.
my original <img src="images/walnut.png" change to <img src="/blob/main/images/walnut.png"
Will work on github hosting pages
You can try by putting the "image link address" from the github repository, in the 'src' attribute of the 'img' tag of the HTML code of your file.
In case anyone has this problem while using jekyll to build a github site, there's yet another variation on this problem. It's a variation of the several answers above to prepend '.' or '..' on the image path in regular html. In the case of jekyll, which renders markdown source files, what should be prepended is {{site.baseurl}}, where baseurl is provided in the jekyll config file and is the root directory of the github repo. In other words:
will render locally,
will render on github pages as per the several answers above, and
will render both locally and on github pages, which is the best way to do it with jekyll since all the coding of the site can be done locally in advance of pushing to github.
I had the same issue In my case the issue was of /
<img src="/Images/shared/desktop/logo.svg" alt="" class="logo" />
I was using this for my Image in html in local machine it was working fine
but in github its not displaying image
but when I removed / from the path it worked
<img src="Images/shared/desktop/logo.svg" alt="" class="logo" />
I had the same problem with GitHub pages:
instead of ../img/image.png, I wrote ../img/image.PNG and now it works fine.
I know this is not a solution but somehow worked for me.
Just in case if someone encounters this error!
I had the same problem, and I changed 'img' folder to 'image', then it worked.
<img class="sealImage" alt="Image of Seal" src="file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg">
That doesn't display an image, just the alt.
But if I go to
file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg
in a browser, the image displays.
I'm hosting this on xampp, on a windows machine right now.
I've tried different browsers, and with and without %20 for space, but I know that with is the correct way.(It worked with both, actually)
And I know the images will only be visible on the machine that's hosting it, that's not a problem.
Your file needs to be located inside your www directory. For example, if you're using wamp server on Windows, j3evn.jpg should be located,
C:/wamp/www/img/j3evn.jpg
and you can access it in html via
<img class="sealImage" alt="Image of Seal" src="../img/j3evn.jpg">
Look for the www, public_html, or html folder belonging to your web server. Place all your files and resources inside that folder.
Hope this helps!
My images were not getting displayed even after putting them in the correct folder, problem was they did not have the right permission, I changed the permission to read write execute. I used chmod 777 image.png. All worked then, images were getting displayed. :)
It wont work since you use URL link with "file://".
Instead you should match your directory to your HTML file, for example:
Lets say my file placed in:
C:/myuser/project/file.html
And my wanted image is in:
C:/myuser/project2/image.png
All I have to do is matching the directory this way:
<img src="../project2/image.png" />
My problem was that I had / in front of the path (assets is a dir), such as:
<img src="assets/images/logo.png>" is correct one, while
<img src="/assets/images/logo.png>" returns an error.
You can try just putting the image in the source directory. You'd link it by replacing the file path with src="../imagenamehere.fileextension In your case, j3evn.jpg.
my problem was not including the ../ before the image name
background-image: url("../image.png");
change the name of the image folder to img and then use the HTML code
The simple solution is:
1.keep the image file and HTML file in the same folder.
2.code: <img src="Desert.png">// your image name.
3.keep the folder in D drive.
Keeping the folder on the desktop(which is c drive) you can face the issue of permission.
Not a direct answer to this particular question. But in case, you are giving the image address correctly like this,and wondering why you don't see the image in the output,
<img src ="../../../public/image.jpg"/>
Directly give the image name like ,
<img src="image.jpg"/>
Or if you have a folder inside public , like say icons , give it like
<img src="/icons/logo.jpg"/>
This is because, React already expects you to have all your images inside public folder. So you don't need to explictly give it.
In your angular.json folder structure should be like this
"assets": [
"src/assets",
"src/favicon.ico"
],
not this
"assets": [
"src/favicon.ico",
"src/assets",
],
This solved my problem.
I am just learning web development and am having a problem I just can't seem to fix.
I have images I want to display on a page, in my ftp they are in book/detailed_image
On my page I have the img src
<img src="/new/site/images/book/detailed_image/book_one_detailed_View.jpg">
I have checked multiple times and the source is correct. If I move the image up a directory to the book directory and change the src the images display correctly.
What could be the cause of this?
The file attributes of the book and detailed_image directories are the same has are the attributes of the image files.
Using firebug it says the url failed to load.
If you have your html file in the same location as your new folder then there is no need to put a forward slash at the beginning of your url.
Change:
<img src="/new/site/images/book/detailed_image/book_one_detailed_View.jpg">
To:
<img src="new/site/images/book/detailed_image/book_one_detailed_View.jpg">
I think it is a problem with the permissions of the folder "detailed_image". If you do a chmod 755 detailed_image then it will work.
this probably isn't the case for you, but I had the same problem - I got a 404 not found error with the image in images/Paris/p1.png but if I moved the image into the images folder it displayed correctly....I fixed my issue by changing the name of the 'Paris' folder to 'paris' - I have no idea why but it worked...
I just solved the issue which I also had: it seems that the subdir "Images" has to have the same rights as the images contained therein.
I changed the access rights for the folder to "755" and added to include all subdirs with the same rights, now it works!
Hope it does the same for you...