I am able to display a local image with html img like this:
import youtube from "./youtube.png"
and
<img src={youtube}/>
However, I have got like hundreds of images I want to use import, so I don't want hundreds of import statements.
Is there a shorter syntax for img src to refer to local images in React? And if webpack is the only way out, will webpack take much time to set up? And since I am on this topic, how does a website typically display images? Do devs download the images and upload these files when the website is deployed or do they straight up use src="https://....."?
Sorry if that is too many questions, I am really only concerned about the syntax to refer to local images, thank you.
You could put them all in the public folder and access them that way if you don't want to use web pack.
As far as I know, there is not shorter way than the method you mentioned to import images, of course you can use web pack as well and once that's set up you can reference it.
As a side note this is from the React docs on usage of the public folder:
You have thousands of images and need to dynamically reference their paths.
You can read more about it here: https://facebook.github.io/create-react-app/docs/using-the-public-folder
Related
Hello guys i need to download files from my database or my Onedrive and save them into react, this files is for my 3d models and the types is obj and mtl. For can i load dinamyc objects from database i need this feature, how can i do this ? I'm using three.js in this project.
Today the project is loading the files stored in project but i like to find a away to pick this from a database or a storage provider.
I tried to do using fetch or something like else but i can't find a away to do this correctly. I don't now if three.js supports url files i try to find but i don't see anything can help me.
Unless three.js provides a feature to take input from memory (in which case you can simply download the file into memory and pass it to three.js), doing this solely from a react app isn't possible. You will need to host your website on a server to have dynamic access to the public directory serving the react website.
Standalone react builds have static assets and can't be updated without creating another build
I have a directory full of text files that I need to read in my react web app
-resources
|-file1.txt
|-file2.txt
|-file3.txt
I would like to store this resources directory somewhere in the app such that the contents of resources can be listed, and individual files can be iterated over on a line-by-line basis.
currently, I'm stuck on listing the files. I'm storing them like this
-node_modules
-public
|-resources
||-file1.txt
||-...
-src
But I really don't care where the resources directory is located. I tried using list-react-files based on this, but got Module not found: Error: Can't resolve 'fs'.
for further context, I was thinking the code to scan for files would be in in App.js, such that the scanned files could be used to populate certain components.
import React from "react"
import './App.css';
...
function App() {
//searching for files
var files = [...];
return(
//create components which can list and work with the files
...
);
}
export default App;
So, to summarize the question, how can I list files in reactJS?
p.s.:
this project was made with create-react-app
part of the point is that it should be easy to add new files to this directory, but I see no reason this process has to be "dynamic"
When people are using your react page, it is "running" on their computer and the software does not have access to all the files and data you'd like to use.
You will need to do this at "build time" when your service is being packaged up, or "on the server".
When you are building your react app, you can hook into processes that can find files and perform operations on them. Gatsby might be your best bet. Look at how people add "markup" files to their projects, built a menu from them and then render them as blog articles. NextJS, Vite, and other frameworks and tools will work, you may just need to learn a bit more.
The other approach, to do this "on the server" means when you are running code on the server you can do almost anything you like. So, your react app would make a call (e.g. rest request) to the server (e.g. NodeJS), and the code running on the server can use fs and other APIs to accomplish what you'd like.
From what you describe, doing this as part of your build step is probably the best route. A much easier route is to move this data into a JSON file and/or a database and not crawl the file system.
Looks like its a client side rendering app and not server side (node app). Resources folder you trying to list is residing in server and react app (javascript) running on browser can't access it directly.
To whom it may concern, I spent more time than I should have working on this. I highly recommend converting everything to JSON files and importing them. If you want to be able to scan for JSON files, make a JSON file that includes the names of all your files, then import that and use that for scanning. Doing things dynamically is a bare.
If you don't reformat, you'll likely need to use Fetch, which is asynchronous, which opens up a whole can of worms if you're using a framework like React.
If you're just importing json files, it's super easy:
import files from './resources/index.json';
where index.json looks like
{
"files":[
"file1.json",
"file2.json"
]
}
if you need to import the files more dynamically (not at the very beginning) you can use this:
var data = require('./resources/'+filename)
this will allow you to scan through your files using the index.json file, and load them dynamically as needed.
This is more of a general question, hence I'm not including any code.
I've looked at quite a few options for both pdf and html, but haven't figured out a good solution.
I'm trying to take the output of what would be rendered by reactJs in a browser and save it to the hosting server instead of (or as well as) displaying it in the browser.
Specifically I'm generating a report using a pretty standard React functions, styled with css, and want to save that report upon rendering to the server.
The API which I also control is Django based.
I've looked at react-pdf/renderer, react-pdf, pdfkit on the Django side (w/wkhtmltopdf), reactdomserver to generate static html files, but can't quite piece together a solution.
Would love some feedback if anyone's done something like this before.
I'm a complete beginner in ReactJS. I'm currently designing a website using it and currently working through localhost.
My main page is on localhost:3000 and I want to navigate to localhost:3000\University(I have designed a separate file University.js for this).
On navigating to the content of this file, it overlaps with the existing content (ie that of localhost:3000). Is there any way to show the new content without overlapping as well as with separate CSS. Any help would be really appreciated.
Actually, I'm not getting what you mean by "overlapping content"! For the css part maybe you are looking for something like "local stylesheets" aka "css modules".
This answer has an example of using local stylesheet for each component. Also, there are various libraries, as mentioned in this post, which can come handy for you.
Go through this article, and pay attention at method 4 there. CSS modules is one of the best solutions in case you are experiencing CSS overlapping.
PS: react-native and react-js are two different tags!
You can understand react routing here, if you have some doubt over it. (Mentioning this because of tag!)
I'm currently developing a blog using react and Webpack and need some advice. I'm storing the contents of each blog entry as markdown in a database, the markdown for any given entry may contain a number of images and this is where my problem lies.
What I wrongfully assumed when choosing this approach is that when I converted the markdown to HTML, the images would resolve themselves correctly. However due to my limited experience using Webpack it turns out this is not the case and instead assets must be manually imported first, great.
I've tried using the markdown loader for Webpack, but of course this requires more manual importing of .md files which I wanted to avoid.
Essentially, is there a better approach to this or is there some way to load images without importing them using Webpack?