When the page loads for the first time the images are fine. The ones who are dynamic with ng-src are working fine, but the static src images are broken. This only happens on Internet Explorer 10/11.
If I navigate to another page and then go back to the homepage instead of the images the page is displaying grey "X" boxes, like the image src doesn't exist. When I check it with inspect element I see that the src is the same, but the image acts like it's broken.
I wonder what may cause this problem?
Thanks!
The issue was that the images had relative paths starting with "./img". When i removed the dot and left just "/img" the problem went away.
Related
I have a component which renders img's with 'loading'='lazy'. When going to the URL for the first time, the images indeed load lazyly. But when leaving the URL for another (same app), then going back to where the images are rendered, they are loaded eagerly. What might be the cause of this?
Hey I have a weird issue in react images. Some images are not showing and some are showing.
This is my simple implementation:
<img src={item?.media?.url} />
and when I check the console and then copy the src, the image opens normally. So the url isn't the problem
Looks like you're trying to hotlink an Instagram image.
You can try downloading the image and then displaying it, or you can just embed the Instagram post
It seems your URL is broken, cause the way your using it is correct, make sure by clicking on the link, a new tab should open showing the actual image
And make sure the extension of the image is being added, cause on the image that you shared, there is no valid image extension in the URL (.png, .jpg, etc..)
I have been trying to figure out Netlify redirects. My Netlify app is at this link (however this is a blockchain application and requires that you have metamask, so I will try to explain my problem so that you don't have to install it to actually answer my question): rekt.netlify.app
I have two main problems:
I have already tried the whole _redirects file with /* /index.html 200 in it. This works when I go to rekt.netlify.app/games and refresh, it will actually come back to that page. That's good. The issue is when I then go to rekt.netlify.app/games/Valorant for example, it will be a white page on refresh, and I cannot figure out why. In my react application, I have react router set up so the path is path="/games/:game"
I went to the Networks tab in the google inspect and I found that this was the request URL when I refresh the page on /games/Valorant: https://rekt.netlify.app/games/static/css/2.80dce9aa.chunk.css
As you can see, the issue is probably something to do with that /games/ comes before /static/ in the URL. I'm a beginner so I don't know what that actually means.
The second issue I am having is that, the img tags of the games load on the /games page, however, when you click on a specific game and attempt to go to a /games/Valorant for example the image will not load. I believe this is due to a similar problem. I have gone into Network tab of google inspect and when I look at the image being loaded in the /games page, it attempts to GET https://rekt.netlify.app/static/media/league_wallpaper.f5e6bf5f.jpg which works. However, when being loaded in the /games/Valorant page, it attempts to GET https://rekt.netlify.app/games/static/media/league_wallpaper.f5e6bf5f.jpg and this does not work, it's a blank page.
You can notice that the second link there has /games/ in it which I believe is preventing it from getting the image. Potentially the problem here is that anything more than one / in the URL is messing things up? I'm not sure. This is the link to my github project: https://github.com/jacob-tucker/ReKt
Edit: Here are some screenshots that will hopefully help. This first one shows that the request URL is trying to get the image from /games/static (which I don't think makes sense). This is happening on the /games/Valorant page.
And then here is a screenshot of /games/Valorant trying to load as well after I refresh the page and get a blank white screen (it returns a status code of 200 because I have /* /index.html 200 in my _redirects file.
I had a the same issue a while ago, I've just added
"homepage": "https://my-app.netlify.app",
in package.json and it worked perfectly.
So Im fixing the gallery page on this website https://gilbertmovingandstorage.com/gallery.html as you can see certain images aren't loading? I uploaded them in the img folder on the cpanel. I can see them right next to those images that are visible in the gallery? The img src has no typos and its not a caching issue because I can't see these images in incognito either? Please someone help me I'm sick of all these issues! This project is taking me too long
here's proof that the images are in the folder https://imgur.com/a/dkfqYq5
and here's a pic of two images and there src url. One can be viewed on the site and the other one can't? Even though there's no typo https://imgur.com/a/GmdPP0z
Also looking at the source in the devtools then opening the img folder then the gallery_img folder I don't see the images there? I only see the ones that are visible on the site? So does that mean iit is a caching issue, and if it is why then can't I see it in incognito or when I clear the cache??
I just loaded the URL and all the images loaded correctly for me.
I finally finished my phonegap app. I put the config.xml file and all my html, css and js files in a folder and uploaded it to phonegap build. I downloaded the ipa file to test it on my iphone.
The app has a page where articles are loaded from a json page that I am hosting on a server. The articles load properly. However when I hold the screen and scroll up or down, the screen starts shaking vigorously. I looked at other forums to see but all I found is DisallowOverscroll. But DisallowOverscroll set to true makes sure that the screen doesn't bounce if scrolled entirely to the bottom or to the top. But my problem is once I put my finger on the screen and scroll down, the page starts shaking up and down. I tried everything for the past two days but nothing worked. Any help is really appreciated.
I also made a video to make it easier. https://www.youtube.com/watch?v=O-Nd4ntZ46E
EDIT: I figured that the problem is arising from pull hook feature (pull to refresh. When I tested the page without the pull to refresh hook, it is working absolutely fine. But I am not sure how to use pull to refresh hook and not make the page judder at the same time.
Theres a mistake on your resolution for iPhone 6, it should be 750 x 1334, also check the image file is the correct size too.
You'll need to show code for the other problem.