Image disappears after routing in app - image

I'm having an issue that's probably not easy to diagnose so I'm going to describe the general issue I'm having.
I'm using a front-end router (page.js) to route around my app. Basically, whenever I route somewhere, I show components that should be shown for that route. The issue I'm having is that when I route to a specific route and then route back to where I was before (e.g. by clicking the "home" button and routing back to the homepage), my images are no longer displaying in their respective components. Here is an example:
Before I route away from my homepage, I have this image (svg) showing:
Then I route away to another view/component, and route back. Now my image is missing:
Upon inspecting dev tools:
Clearly the resource is present, but not showing.
This same thing happens to other images that should be showing in the component(s) that show with that route.
To test things out, I kept one component showing rather than hiding it on routing away from the current view, and sure enough the image was still showing when routing back to the original view that contained it and other components. The images in the other components were still missing.
Again I don't know what this problem would fall under so I hope to elicit some general advice as to what the problem could be.
Update. This issue also happens when using the back button. Perhaps it's related to the history state?

Without knowing exactly why this problem occurred, I have been able to fix the issue by using page.js in hashbang mode. I.e., I turned off the hashbang in the routing and it caused issues with finding public resources on popstate.

Related

Slack: Updating the same image URL that changes daily to show all the changes

I have a Slack channel that I send an image to on a daily basis from a third party service.
The issue is that they do not change the image url so it is always:
http://website.com/image.url
even though the image itself changes, as in it shows different information.
In Slack it recognises the URL and changes all the previous days image to match today.
I tried adding a query to the end of the image eg:
http://website.com/image.url?timestamp=12345678
but Slack is clever enough to ignore that.
Does anybody know of a way to get around this other than make a copy of the image and save it as a different URL?
Thanks.
Slack probably caches the image, either locally on your device or on their servers (the former seems more likely). You might want to try fully closing and reopening Slack if you haven't already. Several other questions describe different behavior (i.e., Slack dynamically retrieving the image so that it is updated to reflect the newest version), so this may be due to something they have changed or a temporary issue on their end. I would try refreshing and/or logging out and back in again, then re-uploading the image if this doesn't work.

Lightbox2: Display other picture if named image is lost

I have a lot galleries displayed with Lightbox2 and it works fine.
Now I want to delete the larger version of the pictures, but keep the gallery with the thumbnails for visitors.
How can I manage, that lightbox2 displays an alternative image, if the given file in the html is not existing?
I couldn't find an option in lightbox.js to handle with missing targets.
I had the same question, but after a little research I decided that Lightbox2 is not the right place to handle missing images. Instead, that should be handled at the server or application level.
The web server will respond with a 404 error for any missing resource, whether a web page, image, or anything else. In most cases, it also returns a small HTML page to alert the user (such as this example at Google).
You can usually configure your server or application to return a default 404-style image instead of an HTML page if the requested resource was an image. That will then be displayed to the user instead of the broken image symbol.
How you do this of course depends on the particular server/application stack you are using, but here is a good solution for Apache.

Endless spinning wheel at Woocommerce checkout

I am in the process of building a shop on wordpress using woocommerce. All is well except that at checkout there is an endless spinning wheel blocking the payment processing.
I have checked the error logs - which show no errors
I have disabled all plug ins - which makes no difference
I have reverted to the default woocommerce shopfront theme - which has the same result.
The console shows no errors.
I have also followed the instructions here https://docs.woocommerce.com/document/endless-loadingspinner-on-the-checkout-page/ which assumes its a memory limit issue. This did not work.
So, after a bit of digging I found some reference here https://mikejolley.com/2015/11/12/debugging-unexpected-token-in-woocommerce-2-4/ and here https://www.maxsangster.com/blog/woocommerce-endless-loading-spinner-on-checkout/
Referring to these two pages I have been able to see that the json response from /?wc-ajax=checkout is just returning HTML which I would imagine is where the issue is.
However I am running an Apache server rather than Nginx as has been mentioned in some threads and articles. Assuming there is a server misconfiguration of the server or something that needs changing what might that be? Bearing in mind that I do not have direct access to this, so will need to be asking someone else to sort it out for me.
And finally if there is something else I can try what might that be?
Thank you to #plushyObject for generating the spark for this one.
The issue turned out that I had a legacy static html holding page in place as the site's homepage rather than having one set up with wordpress. Simply removing the .html page and letting wordpress's homepage take over solves the problem.
The moral of the story create your holding page in wordpress.
Go to Google Developer Tools, then Go to the Network tab. Click the button and make the request and let that bad boy spin out.
You mentioned the response is returning HTML. Click on the request that goes out that appears to be taking forever (/?wc-ajax=checkout) and then click on the Preview tab to display that HTML. I bet it shows an error or a clue, anyway.
In my case the checkout was working fine on Desktop but not on Mobile. After many search on internet I read the solution of #UntitledGraphic.
I had set a redirect in ht-access. The redirect was showing a different home page for mobile. When I removed it, the error gone. I checked back & forth and was sure the ht-access redirect was the problem.
If you have set any redirect in the Htaccess then remove it. This will solve your issue in this case.
I also checked the redirect code on function.php instead of htaccess again the problem appeared. So finally removed the redirection.
In my own case the redirection was the issue. So I had to delete the redirect I created via Cpanel.

Add animation to resetTo or immediatelyResetRouteStack in React Native?

I've spent the better part of today looking for a solution to this. I have a login page that I don't want users to be able to navigate back to. To accomplish this, it's necessary to reset the route stack, removing the login page from the stack. While this can be accomplished with Navigator's resetTo(route) and immediatelyResetRouteStack(route) methods, these both cancel out the nice transition animation.
So, I after some vigorous Googling, I am back to StackOverflow to see if I can get some help. What I need is an animated transition between scenes, while resetting the route stack in the process.
I have seen this link, and the top answer wouldn't actually work. You don't have access the your instance of Navigator when inside the scope of the onDidFocus method, which only gets passed the route object. This means you can't call any of Navigator's methods from within that function.
If I do navigator.push(route), and then manually run navigator.immediatelyResetRouteStack(route) using a button, it does successfully reset the stack. This makes me think setTimeout is the solution, but that both seems like general bad practice / a cop-out.
I can't be the only one who's had this issue.
I got the same problem and I solved it with one workaround, the answer is in this other topic, here is the link: https://stackoverflow.com/a/38111701/1081603

Getting Glimpse/RouteDebugger to work on Cassini 404 pages?

Do I need to do anything extra to get Glimpse to cough up details on a request that return the default 404 server error page on Cassini? By default 404 page, I mean the "Server Error in '/' Application" with a message of "The resource cannot be found" (as well as the HTTP 404 description, requested URL, and version info).
This project has some fairly complex routing, so I don't doubt I have something conflicting with what I am trying to do. I just want Glimpse to provide whatever details it can to point me in the right direction for fixing the problem.
I loaded up Glimpse via NuGet on an MVC3 project I am running through Visual Studio 2010's built-in hosting system (Cassini), and all works fine on previously working action methods and their resulting views. Since then, I added another action method that is proving difficult to hit via the default URL structure (e.g., /controller/action?someparam=x). Since I thought the Glimpse route data would be quite handy for determining what is going wrong here, I went looking for the eyeball in the corder of the default 404 page. Glimpse doesn't appear to be "attached" to this result.
UPDATE: Also doesn't work with RouteDebugger. Whatever I have wrong, it is high enough in the pipeline that nothing seems to be able to pin itself into the response.
UPDATE: The request URL wasn't working because I forgot I had this action set with [HttpPost]. That completely explains the 404, but not how to get any route information from the various utilities on the response sent back.
As far as glimpse goes, one of the reason it wasn't showing in the first place is that we only enable Glimpse on 200 Success results. Hence why the eyeball wouldn't showup for a 404.
Why its not showing up now... have you gone to the /Glimpse/Config page and turned glimpse on? Glimpse isn't enabled by default, so you have to explicitly turn it on.
Let me know how it goes.

Resources