I don't know if I just need to put it through Glitch or something, but this image:
https://astrogeology.usgs.gov/cache/images/bcc98d2cc521e6da95fdab137d99b459_Mars_Viking_MDIM21_ClrMosaic_global_1024.jpg Does not work in this code as an A-frame texture:
<a-sphere position="7 0 -20" radius="0.4" src="https://astrogeology.usgs.gov/cache/images/bcc98d2cc521e6da95fdab137d99b459_Mars_Viking_MDIM21_ClrMosaic_global_1024.jpg"></a-sphere>
How would I fix this?
(and if you want to more easily test this, this is the full code:)
<html>
<head>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sphere position="7 0 -20" radius="0.4" src="https://astrogeology.usgs.gov/cache/images/bcc98d2cc521e6da95fdab137d99b459_Mars_Viking_MDIM21_ClrMosaic_global_1024.jpg"></a-sphere>
</a-scene>
If you are loading the asset from a different domain, make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could either find a host to serve the asset with CORS headers, or place the asset on the same domain (directory) as your application. More info in the A-Frame FAQ
Notice this is not an A-Frame limitation but constraints imposed by browser policies on WebGL textures.
If you look at the console in your example you'll find the following message:
Access to XMLHttpRequest at 'https://astrogeology.usgs.gov/cache/images/bcc98d2cc521e6da95fdab137d99b459_Mars_Viking_MDIM21_ClrMosaic_global_1024.jpg' from origin 'https://careful-successful-jute.glitch.me' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
This is your example but with the image hosted on glitch itself. Make sure the image license allows to do so or get author permission to self host once you moved passed an experiment.
https://glitch.com/edit/#!/foam-glib-waitress?path=index.html%3A7%3A9