Images in static web app not showing after AWS Amplify deployment - javascript

I'm having some trouble getting images to work after my app is deployed to AWS Amplify. I created a pretty simple app that consists of just HTML, CSS and JS files (no angular/react/flutter etc.). My folder structure is currently:
- .html files
- styles.css
--- scripts
|___app.js
|___config.js
|___aws.js
--- images
|___image1.PNG
|___image2.PNG
|___image3.PNG
|___image4.PNG
In my app.js file, I've got a few dynamic image creations setup in the same way (just different variable names and image files):
var image = document.createElement('img');
image.src = '../images/image1.png';
image.addEventListener('click', myFunction);
image.style.cursor = 'pointer';
Specifically the image.src line; I've tried different combinations such as:
image.src = '../images/image1.png';
image.src = './images/image1.png';
(one suggestion I found said to remove one of the periods (not sure why))
image.src = '/images/image1.png';
(placing the images folder inside the scripts folder)
image.src = 'image1.png';
(placing the actual images at the same level as the scripts)
I've even tried placing the images in an S3 bucket, and then using #3 add an image rewrite as described here: AWS Rewrite/Redirect Documentation.
No matter what I try, after pushing my code to GitHub and then after my AWS Amplify app finishes building the code, when I go to website, all the images are showing as if they couldn't be found and the dev console always shows something along the lines of Image could not be found. The server returned with: 404 Could not be found error.
The code works perfectly fine and the images show up on my local machine when I open the Live Preview using either Brackets.io or VS Code, just not when deployed to Amplify.
I've also tried setting up in the Amplify console the Rewrites and Redirects as it mentions in this Github forum: Github Forum but to no avail. My current Rewrites and Redirects section of the Amplify console effectively look like what's shown in the first link.
I've got to be missing some kind of setup to get this working but I'm not sure what it is. Hopefully it's a simple fix and I don't need to effectively re-do the project some other way.
Thank you in advance for any assistance.

I figured it out. I decided to try and use GitHub Pages instead to see if the same problem occurs there and it does. I did some research on why it wouldn't show up there and I found this article: GitHub Pages Stackoverflow which basically says that the filename, extension and folders are all case sensitive. I didn't think that AWS Amplify would have this problem but it does.
My files had .PNG as the file extension but in the code I used .png. After changing it in the code and re-deploying, it worked.

Related

Sounds no longer playing after importing project to React

https://codesandbox.io/s/optimistic-sammet-1yms2?file=/public/index.html
This is my minimal reproducible example.
When the page was only static html with javascript the sounds were working. After refactoring into a React app the sounds have stopped working and I get 2 errors: Uncaught Error: The error you provided does not contain a stack trace. and (index):1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.
When I paste the HTML file path into the browser the sounds are working, but when I run the app on localhost there are errors and no sounds. The rest of the javascript is working, and I have made sure the file path for the sounds is correct.
This is my directory layout.
This code is from daily-planner/public/planner.js and shows the audio play functions:
var penNoises = ["../src/sounds/Pen1.wav", "../src/sounds/Pen2.wav"];
var randomPen = Math.floor(Math.random() * penNoises.length);
function penSound() {
var audio = new Audio(
penNoises[Math.floor(Math.random() * penNoises.length)]
);
audio.volume = 0.1;
audio.play();
}
function penCross() {
var audio = new Audio("../src/sounds/penCross1.wav");
audio.play();
}
The event listeners that call these functions are attached to <li>'s that are dynamically generated from an array, not <audio> elements.
The reason why this doesn't work is the way React compiles the files.
All that is on the src folder, is packed up in a folder named 'static'.
And every file in there is properly linked to the index.html file.
(and I mean, linked as we would expect from the un-compiled project).
It is recommended to load assets on src.
But links on the public folder remain intact, they do not follow the re-arrangment in directories done by the compilation. Run npm run build or npm start to check out.
So the path on your planner.js contains a URL - that's expected - but is pointing nowhere.
That being said/sad, what is logic in the raw project, may not be what is compiled. To be better off maybe look at these rules.
Basically, planner and .wav would be better placed in the source folder. You can also move the .wav file in the public folder (not best option).
I've fixed your codesandbox with that second approach. In part, because it's not easy to deduce from the post if you really need that planner.js in public or not.
Anyways, Hope this helps.
You can just put the audio file inside of the public folder since the script using it is inside public.
function playSound() {
var audio = new Audio("./penCross1.wav");
audio.play();
}
Alternatively, you can put planner.js inside src so you can access the wav file residing inside src

How to insert trigonometrical shape in webpage?

I am working a project in which I have to insert thousands of trigonometrical shape in a webpage. Basically I'm working on a project of converting an ancient book in html. But the problem is- drawing a svg in Adobe illustrator or in any software is time consuming and managing thousands of svg shape in one html page seems very difficult for us. I have searched a lot in stack overflow to draw a shape quickly and I found this library which convert latext into svg which seemed to be a great solution for us. See a live demo here. We simply create a shape in Mathcha and copy the latext of the shape and insert it in our html page.
But the problem is when we import the tikzax Library in the head of our html page and insert the latext code of that shape (as instructed in the documentation) in the body like this:
<script type="text/tikz">
\begin{tikzpicture}
\draw (0,0) circle (1in);
\end{tikzpicture}
</script>
we can't get the ouptut. It only shows a blank html page . The latext code does not effect in any part of the html page. In short we are unable to render the latext in html. Can someone please explain how to render these latext into svg on a webpage. we are unable to find a way to get of it.
Can someone please explain how to render these tikz latext into svg format in a webpage ?
I've attached the screenshots of the html code and the output of it in the chrome browser.
Screenshot of Code:
Output of the Code in Google Chrome (Blank page) as I have told:
I tried to setup the example and ran into two issues. I'll explain how to solve those. However, before you do this, try opening your own example again. After I fixed the issues, I went back to look more closely at the problems, but.. it worked. There is a small chance that the maintainer of the files adjusted the CORS-Headers just while I tried this out - so maybe your problem solved itself. In case it doesn't work for you just like that, here is how I solved the initial problems:
The library doesn't allow requests from other domains, so you can't just include the JS file from tikzjax.com. To solve this, you have to download the source files and put them in the same folder. The js file itself is not enough, you have to download these files:
https://tikzjax.com/v1/tikzjax.js
https://tikzjax.com/ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm.
https://tikzjax.com/7620f557a41f2bf40820e76ba1fd4d89a484859d.gz
Then change your script tag to that local js file: <script src="./tikzjax.js">
The script uses fetch to get other files, and this is not working, when opening the page with the file:// protocol (you'll get this error message in the console: Fetch API cannot load file:///ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm. URL scheme must be "http" or "https" for CORS request.
So you have to setup a local webserver to show the page on e.g. http://localhost:8080. If you're comfortable with the command line, you can use the npm package http-server for such cases. If you haven't installed npm and/or node, you can install it from here (npm is installed with node). Then run the command npm install -g http-server. Then navigate to the folder where your html and js files are (in the terminal) and execute http-server. This will setup the server and the circle should render there.

Getting 404 for local files in Node.js

I recently posted Background image not showing with CSS and thought it has to be something with the url I included even though I was sure it was correct (they were in the same directory so it was straightforward). I wasn't able to resolve that issue and now, I face the same issue but for a .js file.
Picture of work space:
Picture of the Run prompt:
.
In app.js I do have require('./like_button');. I am new to using these technologies, I must be missing something general...
You have to serve the static file from a specific folder. In your case views.
Add this line where you've declared your app.
app.use(express.static('views'))
For more reference check out
http://expressjs.com/en/starter/static-files.html

InAngularJs, ng-src for img doesn't show for local files

I have an ng-repeat that, among other thing, outputs on image:
<div class="installation" get-products install-index="{{$index}}" ng-repeat="installation in installations track by $index">
...
<img ng-src="{{installation.logo}}" />
...
</div>
When my app starts it downloads needed images and stores their location in a local database. When the page is viewed the installations are populated:
<div class="installation ng-scope" ng-repeat="installation in installations track by $index" install-index="43" get-products="">
...
<img src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png" ng-src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png">
...
</div>
(dots used to hide person and client data)
If I paste the src location into my browser I see the image so I know it's saved at that location. However, in my app it's not showing. This is a constant issue through the app with the downloaded files. I know the image are in the correct area and the src location is correct but none of them show.
--- EDIT ---
I do have white listing applied as I was getting an unsafe for file:///. Also, when I was using a relative path it was working fine. I had a preloaded database that pointed to file inside the app files.
I don't think it's an access issue since I have a .db file at the same location that all my data is being pulled from.
--- EDIT ---
I set it as file:///C:/... and I'm having the same issue.
I also tried file:///C:/... , http://localhost/..., http://localhost:/..., http://localhost:C/..., C:/..., and file:///.... None of witch give me anything. The first two localhost items do give me a broken image icon, that's about it. I'm not running a local server, just thought I'd try it.
You can do this in two different ways:
1) Use the file protocol
2) use a local host server to store the picture and access it from the local host
for security reasons you cannot use your file system path for images. you shouldn't even use it at all, because when your app gets hosted, you wouldn't be accessing the image via such paths.
method 1:
just add file:/// in place of the c:/. file is the protocol for your file system, just as http or HTTPS is a web protocol.
NB: I haven't tested or used this before so I'm not really certain. I'm posting this from a small mobile device. but I believe it should work.
method 2:
start your wampserver or python server or any local server you have. put the image in a folder where your server can access (if wampserver, this would be a folder or directory in your WWW). say the name of the folder is "my_images" and your wampserver is running on localhost.. you can access the image like so:
http://localhost/my_images/image_name
use this path for your ng-src.
Because I Cordova File and Windows weren't playing nice using the call for cordova.file.dataDirectory didn't work. Instead I used the fs object returned by window.requestFileSystem(...,function(fs){...});
When generating my save to path as well as the path to create directories and location data I used fs.winpath which returned C:/.... The web (which Cordova basically is) won't allow you to have access to local files not associated with the site/apps structure, which is now obvious.
I dug in to the fs object and found fs.root.nativeURL points to ms-appdata:///local/. Switching everything over to this still downloaded all files and directories to the same location but stored that to the database as the file location. When the app loaded the ms-appdata path instead of the C:/ path the images displayed.
oh, a Cordova app.. why don't you place the file in an images folder In your project. since all files will be loaded using index.html (I assume). you can easily refer to the file relative to the location of index.html. how I would normally organize my project is that, my index.html and folders containing resources like js, CSS etc would be on thesame level, so I can easily get the image files using ng-src="img/image_name". so I could have a structure like this
index.HTML
img
..image_name.ext
..image2.ext
css
..style.css test it in a browser location if it works, it will work on the device. Cordova would know how to translate d into something it can recognise.
This is some sample code, i quickly put together. I tested it and it worked. Firstly i create a directory using file plugin and then download to this directory using file transfer. Replace the url parameter of file transfer with the url you wish to download from.
$ionicPlatform.ready(function() {
$cordovaFile.createDir(cordova.file.externalDataDirectory,
file_location,false).then(
function(success){
return success;
},function(error){
return error;
}).then(function(value){
var url = material.file_uri;
var targetPath = cordova.file.externalDataDirectory
+ "/" +file_location + "/" + file_name;
var trustHosts = true
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(result) {
console.log(result)
}, function(err) {
console.log(err)
}, function (progress) {
$timeout(function () {
console.log(Math.floor((progress.loaded / progress.total) * 100));
})
});
})
})

MVC5 and Javascript relative image paths confusion

My mvc5 webApp can´t seem to display images if I run it on the virtual server, however if I run it locally it works.
So I have tried several approaches and none that allowed me to run the app on the virtual server or on my pc worked I have tried:
(these worked if I was running this locally)
Images/arrow.png
/Images/arrow.png
This path works for the virtual server but not locally.
webAPP/Images/arrow.png
I know about #Url.Action but I have a lot of different images, around 15, and I don´t know if using #Url.Action is a good idea for that many.
any small example would help tremendously!
If you know the path to the images from the site root you can do the following in MVC:
#Url.Content("~/images/my-image.jpg")
The "~/" will map from the site root.
EDIT:
If you're working within a JS file and struggling with relative paths maybe you could add a 'basepath' variable to the top of the file and work with that:
var basePath = "http://www.mywebsite.com/images";
Then in your code, your image URL returned would be something like:
var imgUrl = basePath + "/my-image.jpg";
try this:
#Url.Content("~/Images/arrow.png")

Categories

Resources