I upload image file with previewing it in react dropzone. However, after uploading, the file is successfully uploaded (I can see it in console) but sometimes the image file is previewed and sometimes the same image file give error like:
GET blob:http://localhost:3000/438716d3-2317-438b-9d1e-eb7bc5e6149f net::ERR_FILE_NOT_FOUND
https://i.stack.imgur.com/AwjI9.png
I had this issue and the solution was to use URL.createObjectURL in the image src when displaying the image file from Dropzone.
e.g
<img src={URL.createObjectURL(file)} alt={file.name} />
Hopefully this helps someone else.
Related
i have an issue with upload file image (binary) to GCP.
I tested it in postman and it gave me status 200 with an link can open my image. It's succesed.
When i try it in my app, which is coding by react-native, it's also successed but when i opened link which have my uploaded my image, it shows an error like this..
Can anyone help me with this please !!!
Thank you very much.
enter image description here
i try to search, using with form-data but...
So i'm working on a react project and i want to use an image which is stored in my computer
i made the following code
<img src='my_image.png'/>
however it doesn't show in the browser as shown below
see image
upload your images in your public folder then access it
eg:public/images/p1.png
<img src='images/p1.png'/>
https://codesandbox.io/embed/amazing-bouman-x3mnr?fontsize=14&hidenavigation=1&theme=dark
I store images in public folder, image name is a number from 1 to Image quantity, so I can get image with
<img
ref={this.imageRef}
src={process.env.PUBLIC_URL + `/images/${this.props.index}.jpeg`}
alt={`image #${this.props.index}`}
/>
When I run it on my local npm server images are rendered correclty so I can see them, but when I try to open my gallery from my web site deployed with AWS Amplify, they are not loaded, I see only image alt and image logo.
You can check it out at https://www.diamondcoring.ru/gallery
What's wrong with it ?
I don't know why, but the problem was in file extension .jpeg - it is not handled. .jpg or .png work fine
I am trying to download the image in a folder from a URL in ReactJS https://farm2.staticflickr.com/1871/44381239451_8e000b4b26.jpg
Here is how my screen looks like. Being a PHP developer I know how to fetch, download the image in CURL (very easy). ReactJs I cannot find any library to do it, any code will be helpful.The download image button should Save the image on the Server in a folder
After uploading the image using ng-file-upload to https://angular-file-upload-cors-srv.appspot.com/upload
,I get in response only the image name.
Now, if I want to render the image in html
<img ng-show="createRecipeForm.file.$valid" src="{{response.filename}}" class="img-rounded" height="100">
or
<img ng-show="createRecipeForm.file.$valid" ngf-thumbnail="{{imageArray[$index]}}" class="img-rounded" height="100">
How do I get my image here? I am using this for demo purpose and need to get it from my local computer only for now.
I see can not give path to a drive on computer here for src.
So, how do I render the image in html given that I have the file name.
If you are storing the file using a web server, you should have access to the relative path of the server to use before filename in src="{{response.filename}}"
Check where in the folder structure you are storing them, then you can try: (e.g.)
src="/AppData/{{response.filename}}"