I'm trying to load a React app onto an asp.net view (project was initially written in asp.Net, am creating new pages using React for learning purposes and for fun).
When the React app is running in dev move, all images load without any issue with all pathing working.
After building the app using npm run build, the js file and corresponding image files are generated and I place them on a folder on my asp.net application (e.g. Scripts folder).
When I try to view the page, the React app loads and the screen is rendered, but the images are all broken as the website can't find them.
After looking to see why the images aren't loading, they're getting a 404 not found error due to the images trying to be loaded from the current URL, rather than where the js file and images are stored.
For example, the view which loads the React app is on https://localhost/Home/ReactPage
And ReactPage.cshtml has the following in it:
<div id="thisIsTheReactDiv"></div>
<script src="/Scripts/ThisFolder/app.js" type="text/javascript"></script>
The React app js is in the Script folder in the project, so to access it, the src has been put as shown above. To access the image you'd have to do something like https://localhost/Scripts/ThisFolder/image.png
At this stage what it's doing is the image is being linked to https://localhost/Home/ReactPage/image.png which causes a 404 error.
Are there any webpack configs that can be done to make it point to a specific path before it gets built?
Is there any way to make the React app when building for PROD update the image relative paths so it looks at a specific folder rather than trying to get it from the current path?
Alright, after a few hours of searching (which lead me to post this question), I've figured out how Webpack works with relative pathing now.
Looks like there's a section called "publicPath" in the output setting where you can type in to get the path relative to where your React JS file is deployed at.
So it looks like typing in
publicPath: "/Scripts/ThisFolder/",
will make the relative path to start from there so all images will load from that URL.
As seen from this Stack Overflow link: What does "publicPath" in Webpack do?
Related
I've built out a new site in Next.js and have deployed it on vercel.com (their free Hobby plan).
Everything works except that I built out some sample pages and put them into /public (as instructed by the Nextjs docs) so I have a directory structure as follows:
/public/demo/gencenter/gencenter.html which I'm expecting to be visible on
https://cfsnap.com/demo/gencenter/gencenter.html
but I'm getting a 404 (the console reports "failed to load resource.... 404")
Anyone know if a Next.js has any handles I should jiggle to make static files load? For giggles I put a few image files in the /public directory and I can call them directly and they appear as expected:
https://cfsnap.com/demo/gencenter/swimCalendar.png
I read about naming conflicts in the Next.js docs but "gencenter.html" is unique and doesn't exist anywhere else.
Any help would be greatly appreciated.
Rich
Vercel uses clean urls, causing the file "index.html" to be renamed to "index". When I updated my internal links to point to "index" everything started working again. Only applies to html files apparently, CSS and image files remain unaffected.
https://vercel.com/docs/configuration#project/clean-urls
I have a bunch of images in a hidden gallery, only shown when a user clicks on a certain button.
On the development server, everything is fine, no errors or issues, but when I deploy my website and open the gallery the images don't show and throw a 404 error in the console (I included the required props).
When I replace the <Image/> component with <img>, everything is fine on the development server and live. Can anyone please help? I searched a lot and I didn't find anything like this issue.
My solution:
I had the same issue and solved it by renaming the image file names.
How the issue arose:
I had renamed the images, only changing uppercase to lowercase letters. This resulted in the files being wrongly named in my github repository. After a rename with new characters, the files were correctly updated on github.
Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start, which starts the Image Optimization API.
Use Vercel to deploy, which supports Image Optimization.
Configure a third-party loader in next.config.js.
That means: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available
To solve this problem. I just used next-optimized-images for static image and next/image for images from the cloud.
Kindly read this article for more understanding: https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i
Create a folder on root call it 'static' which is bassically /static/imagename.png
Set the source to the image like so;
<img src="/static/imagename.png" />
This should load the static image in file both in dev environment and build file.
I recently used Google's Firebase to deploy my application. But somehow something is going wrong. Please access the below link to view the exact error trace.
In my build, everything looks normal all the CSS files and JS files have the appropriate code but after the deployment all the Files have HTML, go through the Below URL and watch the console to have a better idea of the error.
https://workout-wfh.web.app/
View both Images to view the difference :
1. In the deployed application
In my local build
If you view the source of the deployed website, you'll see that the <script> tag is trying to load this URL:
https://workout-wfh.web.app/MohanVarma1965/workout.git/static/js/main.5cca3537.chunk.js
which doesn't exist and so is falling back to your default HTML content. It looks like your build process is generating absolute URLs that include your username and directory path. You should adjust your build tooling to leave out everything before /js.
We got a wrap bootstrap theme call ace admin. We are trying to integrate the theme into meteorjs.
The structure of the ace admin files folder is:
assets
avatars
css
fonts
images
img
js
build
demo
files
lib
several javascript files here (*.js)
dist
avatars
css
fonts
images
img
js
By following the tutorial here
I moved all the static content such as images, fonts, etc to client folder, javascript related folders - (assets, build, dist and all the related content) to public folder.
The problem that I am facing it - Meteor is not loading the javascript files inside the public folder.
Could someone help? Thanks.
Edit:
Ok. Finally. Thanks to #Ethaan. After spending almost 2 days figuring out what the problem- its with the javascript loading dependencies. If anyone is facing similar problems - make sure you load all the dependencies first and then load other files.
Do everything in the link provided in the above url that I mentioned and then move all the js folder files to client.
You should know some things about meteor structure, You can read docs
/lib folder its where you put the code you want to share between server/client, code like Routes,Collectios or other code ho is available on server/client(if you put code which use "window" object you will have issues, since windows objects its undefined to the server.)
/publicfolder here is where you put the images, logos, fonts, etc (you get the idea)
/client folder here is where you put the code which will be available only to the client
/server here is where you put the code only available on the server
I recommend you to read the docs, this was just a quickly explanation.
Hopefully someone can help here, more or less looking for a) solution to relative paths or b) insight on another method of loading assets.
We have a standalone web application that is using SDK 4.1 and looks in its relative assets folder for all images and external swfs to be loaded.
on the server, this is the absolute path of the assets directory:
/ApplicationRoot/versionFldr/controls/assets/*
the application uses relative paths in all cases of loading an asset.. and this is continously being added to and updated as we advance versions of the app.
So, in essence, the app is looking for:
assets/*
now forward to the NEW application, lets call it "ParentApp" and the above application "ChildApp".
Parent App is in a different server directory than ChildApp
/ParentApp/version/controls/ParentApp.swf
/ChildApp/version/controls/ChildApp.swf
now, when ChildApp loads into ParentApp, it assumes that it is in the same directory that it's always been in. So, it looks for assets/* and cant find them because
/ParentApp/version/controls/assets/* != /ChildApp/version/controls/assets/*
I need to find a solution to have ChildApp look in an absolute path for ALL loaded assets when it is a child of ParentApp and have it look in paths relative to itself when it is standalone.
The caveats I have are that images are loaded into various controls, caches, and even mx:Text fields (html text with tags). I'm trying to avoid having to globally replace all path links across the application and having to create new coding procedures when new assets are created for the app. ChildApp is in production and has to stay on the 4.1 SDK.
ParentApp is new and has much more flexibility.
I've tried -source-path and -library-path compiler options in childApp, but this lead to compile errors and I have not been able to proceed.
Thank you in advance for any insight and help!
-AJ
I would solve this by having a "baseURL" variable in the child app. Give it a default value so that you can form the usual relative URL's that you are using: `var baseURL:String = "/assets/";
Unfortunately, you then have to modify every asset path in the child app so the path to the assets is something like: baseURL + assetFileName
When the child app is loaded into the parent app, you then give this baseURL variable a non-relative path. Ideally, you do that early in the process, before the child app tries to load any assets.