How to Insert Multiple Values into Multiple Tables in a Single Statement?

React - get img returns 404;

Sanchez

I have a React app with backend in node and mongo; user can post an image with some other details and then it will show on main feed; uploading and storing works well but when trying to show the case all goes well except the image which returns 404; I put an image in the file folder and tried to import it and it works; i tought this might be a path issue , but i tried givin a hardcoded path to the image and it still didn't work; Structure is:
backend
-requests
-resources
...
ui
-app
-components

Component where i show the files

import React from 'react';
import PropTypes from 'prop-types';
import {SERVER_ADDRESS} from 'common/Constants';
import './CaseFile.scss';

const CaseFile = props => {
    const {title, files, history} = props.selectedCase;
    return (
        <div className='casefile'>
            <div className='section'>
                <label>Title</label>
                <div>{title}</div>
            </div>
            <div className='section'>
                <label>Istoric:</label>
                <div>{history}</div>
            </div>
            {
                files.map( file => {
                    return (
                        <div>
                            <img src={`${SERVER_ADDRESS}/${path}`} alt={'alternative'} />
                        </div>
                    );
                })
            }
        </div>
    );
};

CaseFile.propTypes = {
    case: PropTypes.object,
    editable: PropTypes.bool,
    img: PropTypes.object
};

export {CaseFile};

webpack file: ( i mentioned that i tried with url loader as well )

var path = require('path');
var HtmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map',
    entry : './app/index.js',
    output : {
        path : path.resolve(__dirname , 'dist'),
        filename: 'index_bundle.js',
        publicPath: '/',
    },
    module : {
        rules : [
            {
                enforce: 'pre',
                test: /.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            },
            {
                test : /.js$/,
                exclude: /node_modules/,
                use:{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react"
                        ],
                        plugins: [
                            "@babel/plugin-syntax-dynamic-import",
                            "@babel/plugin-proposal-class-properties"
                        ]
                    }
                }
            },
            {
                test : /.css$/,
                exclude: /node_modules/,
                use:['style-loader', 'css-loader'],
            },
            {
                test: /.s[ac]ss$/i,
                use: [ 'style-loader', 'css-loader', 'sass-loader' ]
            },
            {
                test: /.(png|svg|jpg|gif)$/,
                use: [ 'file-loader'],
            },
        ]
    },
    mode:'development',
    plugins : [
        new HtmlWebpackPlugin ({
            template : 'app/index.html'
        })
    ],
    devServer: {
        historyApiFallback: true,
      },
    resolve: {
        alias :{
            'actions': path.join(__dirname, 'app', 'actions'),
            'common': path.join(__dirname, 'app', 'common'),
            'components': path.join(__dirname, 'app', 'components'),
            'containers': path.join(__dirname, 'app', 'containers'),
            'images': path.join(__dirname, 'app', 'images'),
            'store': path.join(__dirname, 'app' , 'store'),
            'utils': path.join(__dirname, 'app' , 'utils')
        }
    }

};

this is how the api returns the data regarding the image