Hi!
I am having problem with my images when deploying my website.
I have a background image that shows perfectly but all other images are not shown:
I can’t see any errors and the files are in both Github and in the build files.
If I right click on where the image is supposed to be and choose show image; the image is shown.
Your image loaded fine for me without doing anything. However it look a little time to load, but on subsequent refresh, it loads fine.
Hmm. Nothing is working for me…
Oh sorry, I read it wrong before. I thought the background image wasn’t loading. Now I see what you mean. I’ll check the issue and get back to you.
I guess something just changed. The images seem to load fine now. Could you check if they’re loading fine for you too?
Yes! It was something with CSS. Apparently you cant have use transform or opacity on the images.
So when I commented that out everything worked fine.
Any idea why?
You surely can. Can you tell what you were trying to achieve?
What I can see now is that I tried to comment out the things that made the images not show.
.profilePic {
height: 15rem;
margin: 1rem;
border-radius: 10px;
/* opacity: 90%; /
/ transition: transform .5s; */
}
.profilePic:hover{
transform: scale(2.5) translate(-130px, 25px);
}
This is for the image on the About page.
However. The transformation and opacity is still there… and the image is showing…
Could you add a link to the deploy before this one, the one in which the images weren’t showing? It will help me compare the 2.
From what I see now, the styles are working fine. I manually added the styles you mentioned using developer tools and the transformations worked on hover.
This is my first time using Netlify and I am not sure how to link to another build
Yes it is working now! Thanks for the help!
Great that it’s all sorted out now.
For future reference, you can go to your deploy details and when you click on Preview deploy, you can get a link to that particular deploy. No matter how many deploys you do after that, that particular link will always show the content published during that deploy.
Thank you!
Then this is a previous deploy with the images not showing:
As I had suspected. I had troubleshot this kind of a problem and had forgotten about it.
If you check the CSS rule, it has opacity: 1%;. I think some minification causes the error. The minify might be converting 100% opacity to 1, but not removing the % sign.
Thank you! Would never have found that myself.
Now I know for future troubleshooting!
