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
Related
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.
My WebStorm's autocomplete stopped working today.
I made a new component and wanted to call it ProductArticleManager as it's the most fitting name for it.
However, the Autocomplete for that single file just refuses to work. Looks like the IDE can't recognize it as a JS file.
I also made another folder called NewComp and made a component NewComp.js to check if it has anything to do with filename matching the folder name, but NewComp.js works fine.
Is there something wrong with this particular name?
What i already did after a little googling:
Restarted the IDE and computer, of course.
Checked that Power Saving Mode is off.
Tried File => Invalidate Cache / Restart option.
Right clicked on the root folder and set it as Resource Root.
Renaming the working test.js file to ProductArticleManager.js turned off the Autocomplete.
Moving the entire folder to another folder.
Deleting ProductArticleManager folder and re-creating it didn't work either.
I work in Ubuntu v20.04, WebStorm v2020.3.
Looks like the file is treated as plain text.
Please check the registered patterns in Settings | Editor | File types -> Text and Auto-detect file type by content file types - can you see ProductArticleManager.js there? Removing this pattern from the list should help
In the network tab of the developers tools, my external javascript file is being read as a json file instead even though it is saved as javascript. I am not sure how to go about fixing this.
EDIT:
Don't have enough rep to post images here, but the link to the left shows that my file is saved as a javascript but the file type says json.
EDIT #2:
function hello(){
alert("Hello, World");
}
just trying to use that lil bit of code to try to get the file itself to work.
EDIT #3:
So i changed the src path as mentioned by user onetwo12 said but the file is still getting a 404 error.
Alright, thanks for your guy's help but after looking where the css files were at, it looks like the scripts and anything else I make will be called from the static directory first and then into whatever I call in the src. So i moved the js directory from outside static directory into the static directory and got things working.
I have stucture code like this:
I try to load javascript into php file like this:
But i have an error like this:
This is my html :
And this is another javascript:
And i try to copy paste the link, and i got an error 404 not found. How can i fix it? Thanks.
Permissions
When the host is correct, and the file is in the right place, and you have no other networking problems, you may sometimes still get a 404 because of bad file permissions. If a server does not have permission to access a file, it may send out a 404 error in response. The reason why some "Not Authorized" error is not given instead, is that this would reveal more information about the files than you, the owner of the server, may intend. The way to respond to requests for privileged files without revealing whether or not they exist is to give a 404.
On Windows, you can view and change the permissions from the File Explorer by right-clicking on the file or folder, then going to Properties -> Security -> Edit. For more information, see the notes on permissions on Microsoft's site.
File Types
Besides permissions, a server must also be configured to serve the type of file you are accessing. If files with different extensions are served, but .js files are not, check the configuration of your server to make sure that .js files aren't blacklisted (or not whitelisted, as the case may be).
Directory Location
You should also verify that the files are actually stored in the top-most directory of the web server if that's how you are accessing them. If they aren't, you may need to prefix the path with the path from the webserver root to your application directory. E.g., instead of fusioncharts/..., you may need /path/to/fusioncharts/... or ../../path/to/fusioncharts.
Other Considerations
In your particular case, you should also verify that the files inside the fusioncharts folder are actually structured the way you think. (E.g., is there really a js/[insert name here].js file inside the fusioncharts folder?
If none of that solves your problem, try to take something that is working and gradually make it more and more similar to the files that aren't working. By figuring out at which point you go from a working setup to a not working setup, you may discover the problem.
If you are referring to a file with path: /ui/new-file.js
then,
1.In html file include
<script type="text/javascript" src="/ui/new-file.js"></script>
2.In server.js or app.js whichever you have, include
app.get('/ui/new-file.js', function (req, res) {
res.sendFile(path.join(__dirname, 'ui', 'login-file.js'));
});
Assuming you are using codeigniter, you can use base_url() function to include JS files in your codeignitor view template file.
<script src="<?php echo base_url(); ?>fusioncharts/js/fusioncharts.js" type="text/javascript"></script>
codeigniter default view template is called welcome_message.php and this file is located in application/view folder.
This is how I include js files in my codeigniter projects. Hope this will help.
In the html you can write *script** in the head or in the body, but not in your file js, delete this in fusionCharts.js
<script type=text/javascript>
In fusionCharts.js write only the function without the script
If you are developing locally, try clearing your cache.
Google Chrome likes to use the cached JavaScript files instead of the real ones.
Clearing your cache should resolve the issue.
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")