1

I am a little confused as to how I should be handling image files in my project structure.

I have a workspace with a React app folder and a Web Api folder. The web api is for video games, and one of the fields in the model is a string, called image. I.e image: ‘call_of_duty_cover.jpg’ .

The thing is, we just learned how to upload images to web api, where we was taught to uplod into MyWebApi/wwwroot/images

But while doing some research I came across a post here on Stack Overflow from 2017: Where should I store images in my web app?

Typically, you'll store images for your website in a directory called "imgs" underneath your root htdocs or public directory. This is considered the front end; you don't really store images in a backend or DB unless you're storing links to those images and providing those links via an API call.

If you wind up with lots of images, it's common to create more folders under that "imgs" directory, say one for each page or for one for each feature, but that's usually where images are kept.

So Im just confused as to why my lecturer would recommend using the wwwroot/images/ as source folder for imagefiles references with links in webapi?

And how would you guys recommend doing this? Thx

Edit: To clarify, the lecture I had the other day about image uploads was about how to upload images to webapi/wwwroot/images folder though React frontend— this is NOT what im asking today, I’m wondering in general where the image files that I reference in the webapi should be stored :) currently I have all the image files in the react project, under public/images/ :)

Edit 2: So the project is to create a web api and database for different video games. And use react to make an interactive solution where one can play around with, I was thinking of doing a quiz thing. In the quiz, for every question I will need to fetch an image or an image link from the webapi to display the image. So I assume I store it somewhere in the folder structure and store strings of matching paths/filenames to fetch the images that way.

I will probably store 50+ games in the database :)

CodeCaster
  • 147,647
  • 23
  • 218
  • 272
nostrad0muz
  • 33
  • 5
  • _"So Im just confused as to why my lecturer would recommend using the wwwroot/images/ as source folder for imagefiles references with links in webapi?"_ - because it's a simple and straightforward approach that works well for the purposes of demonstration and most small web-applications. – Dai Nov 14 '22 at 15:54
  • _"And how would you guys recommend doing this? Thx"_ - that depends entirely on your application's requirements, which you haven't shared with us. – Dai Nov 14 '22 at 15:54
  • the post you cited gave out an example, the folder name doen't matter as long as your web server is configured for serving your images files. They opposed the other way, which is to store directly images in the database, not in the webserver filesystem (and that's not the case here, so you can just follow your lecturer's recommandations) – titouanbou Nov 14 '22 at 15:55
  • I have edited my question for you, Dai. – nostrad0muz Nov 14 '22 at 16:06
  • 2
    @nostrad0muz You need to be **very careful** when allowing user-uploaded files to be saved _and served_ from a publicly accessible web-directory (especially when the file is served directly by the parent webserver (IIS, Apache)) - think about what happens if someone uploads a malicious `.php` or `.asp` file. – Dai Nov 14 '22 at 16:11
  • @Dai I can imagine. This is just for educational purposes, but I will keep that in mind for future reference :) – nostrad0muz Nov 14 '22 at 16:14
  • @titouanbou Thanks, titouanbou. Would you say its fine to store all images in wwwroot/images/ or just the user-uploaded ones? Are there any complications to storing all images in the wwwroot/images folder? – nostrad0muz Nov 14 '22 at 16:16
  • @nostrad0muz yeah it's better to keep separate folders for your image assets and user uploads – titouanbou Nov 15 '22 at 08:49

1 Answers1

1

For static images that are part of the application you can have them in the React application in /public/images/.

For images uploaded by users you can store these images on the backend in /wwwroot/images/ on the backend API server.

You could also have the backend API upload images to a a dedicated content server or a content delivery network (CDN).

Fred
  • 12,086
  • 7
  • 60
  • 83
  • Is this the normal way of doing it? Storing images in different locations? This feels like it would complicate things with needing different code to fetch images based on where they are stored? Im thinking since all the games in the api has a image propery i.e. ‘call-of-duty.jpg’ why not just store all of these game images in wwwroot together with the uploded images? – nostrad0muz Nov 14 '22 at 17:12
  • 1
    @nostrad0muz _"why not just store all of these game images in wwwroot together with the uploded images?"_ - mixing your own files with user-uploaded files in the same directory (or any other kind of storage-space) is a bad idea: users could upload files such that they overwrite or replace your original files, and after a long while how would you know which files are yours vs. theirs? – Dai Nov 14 '22 at 17:25
  • @nostrad0muz Well it depends on, on the architecture of your application, and how much you want to scale. If you have the front-end and the back-end on the same server, or if you host the front-end maybe on a static server or a CDN and the backend separately. Either way, if you want it to scale (imagine 10k+ users) then you want static assets hosted on a CDN, example host on Azure Blob Storage. – Fred Nov 15 '22 at 20:11