Estoy tratando de cargar una imagen desde reaccionar a la base de datos [django] Obtuve errores GET http://localhost:3000/images/Koala.jpg 404 (Not Found) e imágenes que no se muestran en la página. pero se carga en mis archivos estáticos backend.

Esta es mi vista:

 @api_view(['POST']) def uploadImage(request): data = request.data product_id = data['product_id'] product = Product.objects.get(id=product_id) product.imageSrc = request.FILES.get('imageSrc') product.save() return Response('Image was uploaded')

NOTA: Recibí la respuesta "Se cargó la imagen", esta es mi URL de la vista:

 path('upload/', views.uploadImage, name="image-upload"),

y esta es mi función de reacción para manejar la carga de imágenes:

 const uploadFileHandler = async (e) => { const file = e.target.files[0] const formData = new FormData() formData.append('imageSrc', file) formData.append('product_id', productId) setUploading(true) try { const config = { headers: { 'Content-Type': 'multipart/form-data' } } const { data } = await axios.post('/api/products/upload/', formData, config) setImageSrc(data) setUploading(false) } catch (error) { setUploading(false) } }

y este es mi código HTML

 <div id='imageSrc'> <h6>upload picture</h6> <input value={imageSrc} onChange={(e) => setImageSrc(e.target.value)} > </input> <input id='image-file' type='file' custom= 'true' label='Choose File' onChange={uploadFileHandler} > </input> {uploading && <Loader />} </div>

No sé cuál es el problema, pero principalmente es cuando se procesa la imagen desde el backend después de cargarla porque se muestra en la consola.

 Not Found: /images/Image was uploaded [31/Oct/2021 17:12:09] "GET /images/Image%20was%20uploaded HTTP/1.1" 404 2828