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
Related
I have created a new next.js project. Is it possible to have an accessible static html page "outside" the project?
For example the structure would look like this:
.next
components
node_modules
pages
public
styles
aboutus
Now looking at the folder /aboutus/, it will have a structure like this:
css (folder)
js (folder)
images (folder)
index.html
Where the index.html references the css, js and the images.
But when i call http://localhost:3000/aboutus it gives me a 404 error.
Already tried this setup locally, but didn't work.
It turned out a 404 error.
I expect that to work.
Is it possible to have an accessible static html page "outside" the project?
No. Only files that are in the pages folder are generated as pages. pages in NextJS
The closest you can get to accomplish that is by running npm run export and manually insert your "aboutus" folder in the "out" folder. But the project wont have the benefits of These features.
In case the .js is not Next related, have you tried to put the aboutus folder in public/aboutus ?
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)
I'm extremely new to React & recently found out about the %PUBLIC_URL% stuff.
Generally, what is the point of using the url?
Also, it seems kind of messy putting a lot of images/json/etc in one place, so I was wondering if there was any point to creating an img folder inside the public folder: ex. public/img and accessing it like: %PUBLIC_URL%/img/img1.jpeg.
Would that mess anything up?
I've done some research about it but I'm kind of dumb so I don't really see the point of using PUBLIC_URL over just accessing the public/ folder.
From https://create-react-app.dev/docs/using-the-public-folder, it says:
If you put a file into the public folder, it will not be processed by webpack. Instead it will be copied into the build folder untouched. To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL.
Honestly I don't know what this means; could someone explain? Sorry for all the dumb questions <3
TL;DR: Put assets you use from javascript inside your source folder, either in a specific folder (src/img) or next to the javascript files that use them. Use public/ for files referenced in your html, with %PUBLIC_URL% to keep create-react-app happy.
Ideally you'll want all assets and files used in your javascript inside the src folder. This way you can import these files and create-react-app will make sure you have a valid url to them.
Files in your public folder can't be import'ed from javascript! You'll want the public folder for any assets that you need from html directly (favicon, manifest.json, robots.txt) or you just want to be able to link to them (I sometimes have a logo.png in there so I can use that url on other websites).
The PUBLIC_URL is required for assets in public/ because create-react-app needs to insert the path in case you serve your app in a nested path. for example, https://youdomain.com/myapp/v2/index.html, would have a public url /myapp/v2. This needs to be set in your package.json, but if you don't serve from a subpath you don't have to change anything.
I have an html file that I've turned into a string to be used with dangerouslySetInnerHTML. Everything renders fine except for the images within that html string. I can't seem to figure out what path I should provide. Currently I have them in a separate assets folder while the js file is in a dir one level down.
Your React .js files' location are irrelevant to the final address you need to provide to your src attributes. That's because a React up goes through a build process (development build or production build) where all the js files are bundled together and your public folder structure will be very different than the folder structure you have in your development (not to be confused with a development build).
In a normal React app setup (say we create it with create-react-app), your final html is rendered in public/index.html where public is the root of your webserver. Now, let's assume you have your images in a folder called assets directly at the root of your webserver. Then your folder structure will look like this:
public/
index.html
assets/
img1.jpg
img2.jpg
Now you need to declare your img tags as follows:
<img src="/assets/img1.jpg">
Hope that helps.
I am using react for my application. I have a div that I would like to have a background image. But I can't get it to show.
When I include it in the src folder as myapp/src/bgimage.png it works perfectly but I've heard that I should include it in a folder named images at the root level so it's myapp/images/bgimage.png, however this does not work for me and gives me:
You attempted to import ../images/bgimage.png which falls outside of the project src/ directory.'
Can anyone tell me the proper way to include image assets in reactJS?
public: anything that is not used by your app when it compiles
src: anything that is used when the app is compiled
So for example if you use an image inside a component, it should be in the src folder but if you have an image outside the app (i.e. favicon) it should be in public.
I would add that creating an "assets" folder inside the "src" folder is a good practice.
Use /src if you are using create-react-app
If you are using create-react-app, You need to use /src for the following benefits.
Scripts and stylesheets get minified and bundled together to avoid extra network requests.
Missing files cause compilation errors instead of 404 errors for your users.
Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
Also, if you are using webpack's asset bundling anyway, then your files in /src will be rebuilt.
You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.
See this link
No,
public folder is for static file like index.html and ...
I think you should make an "assets" folder in src folder
and access them in this way.
In this article, I mentioned that
Keep an assets folder that contains top-level CSS, images, and font files.
In react best practices we keep an assets folder inside the src which may contain top-level CSS, images, and font files.
According to the create-react-app documentation, regarding the use of the public folder:
Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:
You need a file with a specific name in the build output, such as manifest.webmanifest.
You have thousands of images and need to dynamically reference their paths.
You want to include a small script like pace.js outside of the bundled code.
Some libraries may be incompatible with webpack and you have no other option but to include it as a tag.
In continuation with the other answers I would further like to add that you should create an 'assets' folder under 'src' folder and then create 'images' folder under 'assets' folder. You can store your images in the 'images' folder and then access them from there.
As per my understanding I will go with easier way. If you use your assets from public folder, after build contents from public will be maintained as same. So, if you deploy your app, the contents from public folder will also be loaded while your app loads. Assume your build is 5 MB (4 MB assets and 1 MB src) the 4 MB will get downloaded first then follows the src contains. Even if you use lazy and suspense your app will be slow during deployment.