I uploaded image to the server, but failed to bring images

[yonghunJ]

-mean
-----server
--------- config
-------------config.js
-------- controllers
-------- data
-------- images <---I saved images here using "multer "package

I added this line in mean/server/config/config,js

• app.use('images', express.static(path.join(__dirname,'/../images')))

When I try to access a static image from the browser=>localhost:4040/images
it gives me 401 Unauthorized error.

I don't know why it does not work.
Could you please able to give me an advice?

[evolmk]

I haven't used this project myself, but it has helped me learn some new angular features (i came from AngularJS), i can probably help.

1. I'd recommend you move your app.use middleware code to inside /server/config/express.js file where other similar statements are. (near line 30, before or after the other ones)

2. Adjust your app.use middleware code, from express's docs: "the path that you provide to the express.static function is relative to the directory from where you launch your node process" Which i believe node's "root" process of this app is server/index.js. I am unsure of the Node Process root, so you try some of examples i provided

So if your folder is /server/images, try the following (but read tutorial below) and adjust it. like docs say, path you specify is relative to the node process.

app.use('/images', express.static(path.join(__dirname, 'images')))
or
app.use('/images', express.static(path.join(__dirname, './images')))
or
app.use('/images', express.static(path.join(__dirname, '../images')))

• you should be able to fetch your image from localhost:4040/images/FILENAME.jpg
• of course, make sure that file exists in that /server/images folder first!!

Full Guide from Express.js on serving static files, very useful:
https://expressjs.com/en/starter/static-files.html

Happy MEAN'ing

[yonghunJ]

Thank you guys,

I moved this code in the express.js and tried those code with localhost:4040/images/haha.jpg which exsits in images folder.
app.use('/images', express.static(path.join(__dirname, 'images')))
app.use('/images', express.static(path.join(__dirname, '/images')))
app.use('/images', express.static(path.join(__dirname, './images')))
app.use('/images', express.static(path.join(__dirname, '../images')))
app.use('/images', express.static(path.join(__dirname, '/../images')))

but I was not able to get any image.
In my opinion, app.use('/images', express.static(path.join(__dirname, '/../images')))
this code is right, because __dirname give me "Y:\vmv\mean\server\config"
Do you have other idea about it?
Thank you so much in advance

[evolmk]

and you restarted app? otherwise one of those tests should have worked. Sorry i'm still learning how Angular 7+ builds/compiles app, i'm from Angular 1 world and that should have worked.

If you can't get the express path to work, and get 401, might be something to configure with the /angular.json file. Sorry i'm not much more help, hopefully someone else can chime in, goodluck!

[yonghunJ]

Because I am using Nodemon, it automatically restarts the server after saving the file.
I tried another way.
after downloading recent mean stack files again and request the URL for an image from the node server, but the result is same.. even though one of the other my mean stack works well which is not based on this template.

Thank you so much for your help.
I appreciate it

[mkshverma]

Hi,
Do not add your code in config.js
app.use('images', express.static(path.join(__dirname,'../images')))
add this line in express.js before the line containing app.use(
then you can access the images on /images

[hackman01]

Hello,
I am able to access the image in browser(via image url) but i am getting CORP error while fetching from react (axios).
Please help me to solve this one

[mkshverma]

You have to use cors library if frontend and backend have different url.