0

I want to upload images to the server by using python flask in a fixed location by using the following code.

UPLOAD_FOLDER = 'F:\Coursera\React_Flask\SocialNetwork\Frontend\Api'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
_file = request.files['file']
filename = secure_filename(_file.filename)
target = os.path.join(UPLOAD_FOLDER, 'image')
if not os.path.isdir(target):
                os.mkdir(target)
source = "/".join([target, filename])
_file.save(source)

Image is uploaded the corresponding folder. Then I try to display the image in react frontend by the following way but nothing display.

<img src={'../../../api/image/imagename.jpg'} alt='profile' />

folder structure: main directory:

F:\Coursera\React_Flask\SocialNetwork\Frontend\
 --api:
   -image  //images in this folder
   -venv
   -user_api.py  //flask api
 --node_modules
 --public
 --src:
    -components
       -profile
         -profilepage.js //react component.
KcH
  • 3,302
  • 3
  • 21
  • 46
Md. Alauddin
  • 1
  • 2
  • make sure the images are in `src` folder ... not outside and follow this link [importing .png in React](https://stackoverflow.com/questions/43823289/how-to-import-image-svg-png-in-a-react-component) – KcH Apr 29 '21 at 17:23
  • If I put the image in the src folder that is working. But in production, I provide only the build file and I want to upload images outside the build folder using the flask server and display images in react. In this case, I balance the folder structure. What can I do in that case? Is it possible? Any suggestions? – Md. Alauddin Apr 30 '21 at 04:39
  • May be you should be using absolute path .. try that – KcH Apr 30 '21 at 05:59
  • `profile` This is also not working. – Md. Alauddin Apr 30 '21 at 13:40
  • I think you should refer this [post](https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory#:~:text=jpg%20which%20falls%20outside%20of,to%20it%20from%20project's%20node_modules%2F.) – KcH May 01 '21 at 10:28

0 Answers0