Why are my videos and images not showing up? - aframe

I have an image or video on AWS S3 or somewhere on the Internet.
I tried to apply a texture to a box by referencing the image path directly:
<a-scene>
<a-box src="https://blah.com/sometexture.png"></a-box>
</a-scene>
But nothing shows up. I get some console errors about no image and CORS.

With A-Frame 0.3.0, you no longer need to manually specify crossorigin. It will automatically be set on assets that require CORS.
https://aframe.io/faq/#why-does-my-asset-e-g-image-video-model-not-loading
Generally, the issue is due to CORS. Because all assets are fetched via XHR, you will need to enable allow CORS headers on your asset. This is very common if you serve from S3. Once you have enabled CORS, you need to set crossorigin flag on your assets:
<a-scene>
<a-assets>
<img id="texture" crossorigin src="https://blah.com/sometexture.png">
<video id="texture2" crossorigin src="https://blah.com/sometexture.mp4">
</a-assets>
<a-box src="#texture"></a-box>
<a-video src="#texture2"></a-video>
</a-scene>
We do have a free uploader provided by UploadCare. It is down at the moment, but later you will be able to upload here and get CORSed assets for free https://aframe.io/aframe/examples/_uploader/
On iOS Safari, if the image still doesn't load, you may have previously loaded it without crossorigin and it is cached. Try clearing the browser cache.

Related

How can I cache image assets in NextJS?

The NextJS docs specifically states (https://nextjs.org/docs/api-reference/next.config.js/headers#cache-control):
You cannot set Cache-Control headers in next.config.js file as these will be overwritten in production to ensure that API Routes and static assets are cached effectively.
What's an alternative way to cache image assets in NextJS?
I tried using the NextJS Image component, but it messes up my self-hosted image urls with proprietary NextJS urls. I want to evade that.
When making use of the <Image /> component, NextJS will automatically store and serve optimized versions it stores server-side. That is the reason why you see the NextJS URL's (as that is where the new optimized and cached images are at). If you do not want these optimizations you can use a regular <img /> element, because NextJS requires the use of it's backend services to optimize the image for you.

Panorama won't load in AFrame 360 Image script when hosted on work website backend

I am working on hosting a 360 panorama for work, I have got it to work using AFrame 360 Image when the file is hosted on Imgur, but I need to try get it to host off my works website as to support a larger file size and ease of access. Currently the script loads in but then no image appears, this occurs for any image hosted on the website. Why would this be?
I have tried files of all different sizes and extensions, none of them load inside the script despite being accessible through direct link.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky src="https://mapping.hdc.govt.nz/photos/LowStitch.jpg" rotation="0 0 0"></a-sky>
</a-scene>
</body>
</html>
I expected it to work the same as when using the image hosted off Imgur, however all I get is a white screen with the VR logo in the bottom right.
Check out the console logs -
Access to image at 'https://mapping.hdc.govt.nz/photos/LowStitch.jpg' ... has been blocked by CORS policy: No 'Access-Control-Allow-> Origin' header is present on the requested resource.
it shows its a CORS (Cross-origin Resource Sharing) error. It means the server is not serving the files with a CORS header for aframe.io - therefore denying the resource. Try putting the website at the same directory as the photos. Or contact the server administrator about the header.
For details on CORS - here is an explicit anwser on CORS in aframe by H.Pauwelyn.
Asset needs CORS headers for it to be loaded cross origin from your web host: https://aframe.io/docs/0.8.0/introduction/faq.html#why-does-my-asset-e-g-image-video-model-not-load

Tomcat 8 Fav Icon cannot be replaced

I am beginner so take it easy on me.
Recently i have developed a web application in java and i have deployed it on Tomcat7 and it worked fine but when i deploy it on Tomcat8 the default fav icon cannot be replaced although i am using the following:
<link rel="shortcut icon" href="/url/logo.png" type="image/x-icon"/>
<link rel="apple-touch-icon" href="/url/logo.png">
And the browser locates the photo perfectly it's not 404 Error!.
I think the problem is related to tomcat8 because the app worked fine on tomcat7.. what should i do to solve the problem ?
With all the comments: Works for me (tried on 8.0.32).
Make sure
that the Icon is indeed available where you expect it
that the other browsers didn't cache the image
that you don't have a <base> tag in <html><head>, so that the browser would expect the image somewhere else than you.
You can use the developer tools (hit F12) and check what file Firefox is loading, its response code and content and response headers.
You might need Shift-Reload in order to bypass the cache, or explicitly flush the cache before this operation.
You can also experiment with temporarily declaring other images and double check on all browsers, just to make sure you're indeed bypassing the cache.

How to enable CDN CSS in Brackets, Chrome?

I am using brackets to edit a simple HTML document. The document refers to a CSS hosted on a CDN:
<head>
<title>Test server monitor</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
This call works perfectly from the production server. However, when loaded in Chrome using the Live Preview mode, the external CSS is not loaded. I guess the reason is some cross-site limitation.
How do I allow Chrome to use A CSS from a CDN called from a local file?
You can fix this relatively easy, simply change your href to:
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
The http: ensures the correct protocol is being implemented for the request.

Why is Facebook inserting a preload script for my app's css in HTTP when my page's reference is in HTTPS?

In our app (https://apps.facebook.com/testedenivel), we explicitly reference the page css in a https link like this:
<link rel="stylesheet" href="https://d2asm4nez8zghw.cloudfront.net/content/app-teste-de-nivel.css?v=0.96.02" type="text/css" media="screen">
But strangely, Facebook is preloading this this css file as a HTTP link. At some point before, we used this HTTP url but later we changed it to HTTPS, and now it seems that Facebook is using a former, cached version of that url:
<script type="text/javascript">
new Image().src = "http:\/\/www.talkfast.com.br\/content\/app-teste-de-nivel.css";
</script>
The problem is that when the user enters our app via secure browsing, the HTTP link preloading is causing the browser to alert our users that some insecure content is about to be loaded. We'd like to know how to tell Facebook to remove this preloading script, or at least to use our current HTTPS url, like this:
<script type="text/javascript">
new Image().src = "https://d2asm4nez8zghw.cloudfront.net/content/app-teste-de-nivel.css?v=0.96.02";
</script>
There seems to be scarcity of reference regarding this issue on the web, so any help would be appreciated.
I'm not test this solution in facebook app but on wild web you can use this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
as proof :)
http://paulirish.com/2010/the-protocol-relative-url/
With this all resources loaded with page protocol, so user don't see confirmation about unsecured elements on page.
Just create test app with Heroku and my chromium not angry about https resouces inside frame so problems depends on browser.

Resources