I use react-pdf/renderer in my app and managed to create PDF file with some images included. Images located locally (the ones imported via import from 'imagePath') are loaded normally, but when I pass base64 encoded string, image is missing in PDF preview. As per doc, built in <Image /> component can receive url but in my case it doesn't work. Anyone faced similar issues?
I'm a few months into web development so I apologize if I misunderstood anything.
What I did
I created a react-random-shapes package that would draw out random shapes as a React component. You can see an example here on my site or in the project page. Each time you refresh the page you'd get a new image. (Note: these pages use React.)
What I want to do next
The result I'm aiming for is to create an API (GET-only) on GitHub Pages that would return the dynamically generated svg file (so you can do something like
<img src="https://github.com/artt/react-random-shapes/blob?size=300&fill=red">
which would return a random blob for anyone who's interested in using. Alternatively, this API could return the svg path so the user could do whatever they want with it (e.g. animation).
The problem I have
Right now I know how to output an html page with the svg file, but not quite sure how to return just the svg (or json, etc.) part of it.
Thanks!
I am trying to do the same thing. I think your best bet would be to use a webserver on another platform like Heroku or, another good option, Replit.
I'm making an app with react native and spring boot for backend, what is the best way to save images? Is it fine to get compressed base64 string from image crop picker and save it in the database?
I test it and it works. I chose 10 MB image and when it saved after compressing, it becomes 182kb and i test the fetching speed and its fast. so is it fine to do that? If not, what should i do?
i know i should upload the image in a folder in the server and put the path in the database but then what ? In React Native you cant put path for image as variable like:
<Image source={require(x) } />
and x is the saved path in database, i know that the hole thing "require (/path/image name)" must be a variable to work but if i put in the database it doesn't work because it will be saved as string but it must be jxe to work so what is the solution?
I recently saw traced SVG image loading in gatsby.js
https://medium.com/workshop-me/traced-svg-images-for-excellent-ux-d75a6bb4caed
Is there any way in which i can implement this in create-react-app, with automation.
Right now,
I use create-react-app and cloudinary. I store the url in my database,
I couldn't find a good resource through which I can make this happen.
Help would be appreciated.
If you read the post and what it uses, you find that it uses https://github.com/lovell/sharp, which accepts an image as parameter, in your case you can download the image, apply the filter and finally use the most important part of this technique:
<div
style={{
backgroundImage: `url("${realUrl}"), url("${
tracedSVG
}")`,
}}
/>
</div>
Then the browser will do the dynamic load for you.
I'm trying to retrieve a picture from my file system after a good storage,(instead of putting it in the database I copy it to the disc and i put the path to the db)
I had store the picture to c:\images\ folder and supposing that the name the complete path is c:\images\mypic.jpg
when I try to retrieve it a set the img src attribute to <img src="c:\images\mypic.jps"> by using some java code
in the browser console I found this error Not allowed to load local resource: file:///C://images//mypic.jpg
Question: how to fix these path problem ? where Should I store the pictures ? and from where should I retrieve them ?
sending tag <img src="c:\images\mypic.jpg"> would cause user browser to access image from his filesystem.
if you have to store images in folder located in c:\images i would suggest to create an servlet like images.jsp, that as a parameter takes name of a file, then sets servlet response content to an image/jpg and then loads bytes of image from server location and put it to a response.
But what you use to create your application? is it pure servlet? Spring? JSF?
Here you can find some info about, how to do it.
In Chrome, you are supposed to be able to allow this capability with a runtime flag --allow-file-access-from-files
However, it looks like there is a problem with current versions of Chrome (37, 38) where this doesn't work unless you also pass the runtime flag --disable-web-security
That's an unacceptable solution, except perhaps as a short-term workaround, but it has been identified as an issue:
https://code.google.com/p/chromium/issues/detail?id=379206
You have Two alternatives :
First one is to create a ServletImageLoader that would take as a parameter an identifier of your image (the path of the image or a hash) that you will use inside the Servlet to handle your image, and it will print to the response stream the loaded image from the server.
Second one is to create a folder inside your application's ROOT folder and just save the relative path to your images.
Many browsers have changed their security policies to no longer allow reading data directly from file shares or even local resources. You need to either place the files somewhere that your tomcat instance can serve them up and put a "regular" http url in the html you generate. This can be accomplished by either providing a servlet which reads and provides the file putting the file into a directory where tomcat will serve it up as "static" content.
The concept of http location and disk location is different. What you need to do is:
for uploaded file summer.jpg
move that under a known (to the application) location to disk, e.g c:\images\summer.jpg
insert into db record representing the image with text summer.jpg
to display it use plain <img src="images/summer.jpg" />
you need something (e.g apache) that will serve c:\images\ under your application's /images. If you cannot do this then in step #2 you need to save somewhere under your web root, e.g c:\my-applications\demo-app\build\images
This error means you can not directly load data from file system because there are security issues behind this. The only solution that I know is create a web service to serve load files.
Here is a simple expressjs solution if you just want to run this app locally and security is not a concern:
On your server.js or app.js file, add the following:
app.use('/local-files', express.static('/'));
That will serve your ENTIRE root directory under /local-files. Needless to say this is a really bad idea if you're planning to deploy this app anywhere other than your local machine.
Now, you can simply do:
<img src="/local-files/images/mypic.jps"/>
note: I'm running macOS. If you're using Windows you may have to search and remove 'C:\' from the path string
Do not use ABSOLUTE PATH to refer to the name of the image for example: C:/xamp/www/Archivos/images/templatemo_image_02_opt_20160401-1244.jpg. You must use the reference to its location within webserver. For example using ../../Archivos/images/templatemo_image_02_opt_20160401-1244.jpg depending on where your process is running.