I built a website on NextJS and deployed it on vercel. On the local environment at localhost:3000, it shows the background image but on vercel it does NOT show the background image.
Below are screenshots
On Vercel :
On Local :
I am setting the background image with the tailwindCSS where I defined the images in tailwind.config.js file and using them in different components. But that is not the issue as it is working fine in local envirenment.
I don't know what is the reason that why it is behaving differently.
Project GitHub Link : https://github.com/mohitm15/Weather-Lytics
Instead of using relative imports to the public folder within your tailwind config, you should leverage next's static file serving to load images from it.
For example, if you look in the DOM, the URL pathing generated during the build process is trying to utilize mini-css-extract-plugin to create a path, but the path is not valid:
When using static file serving, your tailwind config would change from:
'day_sun' : "url('../public/back_big.jpg')",
to:
'day_sun' : "url('/back_big.jpg')",
When compiled, the path may look incomplete, but it's actually directing that request to /public/[image].[ext]:
Working demo (the weather searching feature will not work since NEXT_PUBLIC_API_KEY_1 is undefined): https://weather-lytics-refactor.vercel.app/
Even though I load my images from static file serving, similar bug still happened to my app.
The bug is at my /public/img folder. According to the document, seem like the /img folder have similar name with some next file or folder, which can cause bug.
To fix it make sure you don't have any folder name "img" or something like that . . . (name "pic" work for me)
Related
I made a React app with Vite for my portfolio. There I have buttons that change the image of my known skills when i click them. I have implemented this locally using useState. My website works correctly locally and the images load correctly. But when I build it for production only the images that I have imported as components and added load, but the images in the skills section do not load. I have identified the issue to be that the image path does not translate to the production build directory structure after build so the images are not found. But i dont know how to fix this.
Here is my github repo : https://github.com/coderboy53/portfolio
Putting the images under public folder should solve the issue
You can keep the images under public/images
wondering if anyone can help me. Im following a tutorial which has told me to put the images in the public folder in an app created with create-react-app
'./img/newyork.jpeg'
this is the path the tutorial told me to use for images in the public folder however the images aren't loading and i cant understand why any help would be much appreciated
Build File Structure
You shouldn't keep any image assets in the public folder other than favicons etc See this thread also: The create-react-app imports restriction outside of src directory (TLDR: "This is special restriction added by developers of create-react-app. It is implemented in ModuleScopePlugin to ensure files reside in src/. That plugin ensures that relative imports from app's source directory don't reach outside of it.")
Generally in a create-react-app I would import images like so:
import lovelyImage from 'images/lovely-image.jpg'
and then rendered:
<img src={lovelyImage} alt={''} />
(the example above would assume the images directory is in the src directory (not public))
process.env.PUBLIC_URL + 'your image path'
is a solution I found that works
I want to run a React app inside salesforce Lightning container. I built the app with npm run build, upload zip file but nothing works. All I can get is a blank page.
Build folder before zip
Zip and uploaded to Static resource
In deveoper console
<aura:application >
<lightning:container src="{!$Resource.Mirage + '/index.html'}"/>
</aura:application>
The preview page is blank and I don't know how to do it properly. I feel like it cannot load my resource.
Do I have to give up on CRA and build custom webpack?
Full disclosure: I never tried this. But it looks like you have to:
To reference a file in an archive, use the URLFOR function.
I am not 100% sure this is the answer.
Let me know.
yesterday I wanted to create a landingpage for a subcategory if my website. The site it build with create react app. I created the sub-page using react router. On lokal machine everything works fine.
But after I deployed it on AWS (amplify) the included fonts in the whole app (old site and new one) are not working anymore.
I am getting the "Failed to decode downloaded font: " and "OTS parsing error: invalid version tag" errors.
I didn't changes anything in the index.scss/index.html files.
After I`m running the build command the fonts-files are in the right folder ...
This is how my index.scss looks like:
#font-face {
font-family: "SF Compact Display";
src: url("./assets/fonts/SF-Compact-Display-Regular.otf");
}
#font-face {
font-family: "SF Compact Display Semi";
src: url("./assets/fonts/SF-Compact-Display-Semibold.otf");
}
I also tried it with absolute path :
enter code here src: url("assets/fonts/SF-Compact-Display-Semibold.otf");
But it doesn't work.
I imported the index.scss into my index.tsx import './index.scss'
Both files are living in the src root.
I have read lots of other stories that are similar to my problem. But nothing works.
Does anyone have a guess why I am getting this problem? Is there maybe a redirecting issue with aws as this is the only think which I changed?
(as i said before I included the react router the fonts where working fine ). I also tried to remove the react router and get the old page with the right fonts. But now I have the same issue there.
On aws rewrites I included </^[^.]+$|\.(?!(css|gif|ico|json|jpg|js|png|txt|svg|woff|ttf|otf)$)([^.]+$)/> with /index.html and 200 Rewrite.
Im trying to fix it for hours now, but I don't have any clue what the issue could be.
I hope anyone had the same issue in the past and can help me.
Bests
Not sure if you already solved this, but here're some thoughts to help.
The Failed to decode downloaded font error is almost certainly because the app responded to the browser's request for the font with html. This would likely happen if there's a catch-all route configured for the SPA (e.g. respond with the root index page or a not-found page).
From the info you've shared, the most likely issue is that the relative path to the font files is being broken in the build process. The key insight here is that url("assets/fonts/SF-Compact-Display-Semibold.otf"); isn't actually an absolute path because it's missing the / prefix. If your build's putting the font file in /assets/fonts/SF-Compact-Display-Semibold.otf, what you want is: url("/assets/fonts/SF-Compact-Display-Semibold.otf");.
A useful way to check the directory structure produced by building is to run npm run build (see https://create-react-app.dev/docs/production-build/). This produces a production build in a directory called build. When creating an AWS Amplify project, it automatically sets up running the build process for you (see https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html). By default, for create react app apps, this means it'll do npm run build prior to deploy.
I have a website written in React.
The website itself works fine.
I also have blog which is based on Wordpress.
When I put blog contents on blog directory, React show the 404 not found page because all contents but static is managed by React.
I think if I could set one more directory called blog as static directory, I can put all Wordpress related files on the directory.
But I was struggling to do that.
Is there any options or setting files for react-scripts build?
like react-scripts build --static-directories static,blog
Could you please help me?
/index.html
/static/* < static contents
/blog/* < also static contents.
Thanks in advance.
[UPDATE] even though i put static file on static directory, I could not access it. It turned out I need to import that static file from Reactjs file...
This is something you probably want to deal with on a server level.
So if you are using express, then you can do something like:
app.use('/static', express.static('public'))
[SOLVED] Problem was 2 folds.
Server-side and client-side.
First, I edited the .htaccess file not to rewrite anything.
RewriteEngine off
Now Safari can understand "my domain/blog/" correctly.
But Chrome still treat "my domain/blog/" in ReactJS.
I don't understand why but I can see correct no-React contents only once after deleting cache. But once I open React contents, Chrome start treating "my domain/blog/" as React contents again.
Then I checked source code again and found that I used a React Router's feature called Switch. It seems Switch is doing rewriting thing in React.
So I removed the Switch tag and finally problem solved.