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.
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'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.
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
Below I have shared my current directory structure for my AngularJS application that I have been rewriting from the first time I wrote it while I was learning the javascript framework. I have been revising this project structure to be more of a component-based application in case I need to further add new features to the project.
I currently have two index.html files and trying to figure out which one I should keep. Should keep the file existing in the public directory or should I keep the file inside of the src directory? Keep in mind that I have run a build script to create my app.css and app.js file.
In both index.html files, I have an ng-include file where I am attempting to load view partials and none of them are loading. I do not receive any javascript errors.
<ng-include src="../app/components/employees/views/form.html"></ng-include>
<ng-include src="../app/components/employees/views/stats.html"></ng-include>
<ng-include src="../app/components/employees/views/table.html"></ng-include>
I was able to restructure my application and my build processes which easily removed the need for a public directory. By doing this I also was able to adjust the path to the partial files so they could render propertly.
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.