Is there a way to show images on my App without saving the image file itself in either the front-end or database?

Currently, I have images saved on the front-end with the imageUrl stored in the backend for each specific object. However, whenever new images need to be added for the mobile app, I find myself having to update the front-end and create a new release to push out the changes to both app stores. This process feels quite inefficient. My front-end is not hosted on a server, unlike my backend.

As I am using a free MongoDB instance, storing a large number of images could potentially consume a significant amount of bandwidth.

Any thoughts or suggestions on a better approach?

Answer №1

The best practice is to store image files in Object storage such as S3. After that, save the reference of the uploaded image in the database.

By doing this, you can easily retrieve the image reference from the back-end using an API and utilize it on the front-end.

Answer №2

One convenient solution is to utilize online storage services like Amazon S3 or Google Storage to store your images. Simply upload your images to one of these platforms and then use the public URL provided to integrate them into your app. I hope this provides a helpful answer to your query.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pictures are not visible on mobile devices

Currently, I am utilizing Ionic 2 for my project. While the images are displaying correctly on the browser, they are not showing up on the device. This issue has been perplexing me. I attempted to resolve this problem by using the following code: <i ...

What could be causing the TypeScript class property to be undefined?

Below is the code snippet I am working with: class FeedbackController { public homePage(req, res){ this.test(); res.send('Welcome to feedback service'); } private test(){ console.log('test called'); } } export de ...

Custom font for Ionic styling

Greetings! I come to you with a query regarding font usage. Note: I am developing an app for mobile devices (iOS, Android) using Ionic with Angular. I am looking to incorporate the Poppins font into my application. It works perfectly when accessed on a P ...

The Angular service is sending back the error message "undefined" when trying to retrieve data with the ID parameter from the requested

When calling a service from a component, I am encountering a 400 bad request error with the following message: "Invalid data 'undefined' for parameter id" It's worth noting that the getProduct method in the API is functioning correctly. ...

Issue with Angular: event.key doesn't register as shft+tab when pressing Shift+Tab key

Our website features a dropdown menu that can be opened and closed by clicking, revealing a list of li items. However, we are currently experiencing an issue with keyboard focus navigation. When the Tab key is pressed, the focus properly moves from one li ...

Ways to invoke a component function from another component

Hello all, I am currently learning Angular and I have encountered an issue where I need to call a function from one component in another component. Most of the solutions I found online involve scenarios where the components are either child or sibling comp ...

Node's TypeScript parser loses the order of same name-tags when converting XML to JSON

I've experimented with xml2js and fast-xml-parser and received similar results from both (in different formats, but that's not the focus here) This specific example is from fast-xml-parser Here's the XML data: <test version="1" ...

What is the importance of using ChangeDetectorRef.detectChanges() in Angular when integrating with Stripe?

Currently learning about integrating stripe elements with Angular and I'm intrigued by the use of the onChange method that calls detectChanges() at the end. The onChange function acts as an event listener for the stripe card, checking for errors upon ...

minimize the size of the image within a popup window

I encountered an issue with the react-popup component I am using. When I add an image to the popup, it stretches to full width and length. How can I resize the image? export default () => ( <Popup trigger={<Button className="button" ...

Found within the NgModule.imports of ViewClientModule, however, contains errors within the export class SharedModule { }

Recently, I upgraded my Angular project from version 11 to 13. After the upgrade, I encountered an error message "error NG6002: Appears in the NgModule.imports of VerifiedprofilesharedModule, but itself has errors 664 export class SharedModule { }" view i ...

retrieve the checkbox formgroup using the Response API

After following a tutorial on creating dynamic checkboxes, I now need to implement dynamic checkboxes using an API request. In my implementation so far, I have defined the structure as shown below: inquiry-response.ts interface Item { // Item interface ...

The mat-select value is experiencing issues when including spaces and is not functioning as

There seems to be a minor mistake that I can't seem to locate. Below is the form in question: <mat-card> <form #f="ngForm"> <mat-card-content> <mat-form-field> <mat-select [ngModel]="data.variab ...

Customize the template of a third-party component by overriding or extending it

I am facing a situation where I need to customize the template of a third party component that I have imported. However, since this component is part of an npm package, I want to avoid making direct changes to it in order to prevent issues when updating th ...

Confirming the validity of a certain attribute by referencing other attribute keys

I am looking to enhance the type-checking for the following object: interface Config { fields: Record<string, unknown>; table: { id: string }[]; } const config: Config = { fields: { id: {} }, table: [ { id: ' ...

Encountering an Angular 12 error 401 upon refreshing the page

Currently, I am working on a login form using angular 12 with Spring Boot that includes basic authentication spring security. When a user successfully logs in, they are directed to the main page which offers CRUD actions as depicted in the images linked be ...

The command "ng test" threw an error due to an unexpected token 'const' being encountered

Any assistance with this matter would be greatly appreciated. I am in the process of constructing an Angular 5 project using angular/cli. The majority of the project has been built without any issues regarding the build or serve commands. However, when a ...

Upgrading to Angular 6 causes Linter to become significantly more stringent

Recently, I made the jump to Angular 6 and am currently in the process of deploying it. However, I have encountered a major roadblock. The latest issue that I'm facing is an extremely strict linter. When I try to deploy my application using firebase d ...

Ways to modify the CSS of an active class within a child component when clicking on another shared component in angular

In my HTML template, I am encountering an issue with two common components. When I click on the app-header link, its active class is applied. However, when I proceed to click on the side navbar's link, its active class also gets applied. I want to en ...

Exploring the possibilities of combining Angular-CLI and the latest Bootstrap

Embarking on my journey with Angular 2, I decided to use the official angular-cli tool to create a new project. Creating a new project was straightforward: ng new [my-project-name] The project was successfully created and ready for customization. Wanti ...

Angular-12 ngx-datatable does not recognize the element 'ngx-caption' in Angular

Within my Angular-12 project, I have set up two modules: AppModule and AdminModule. Specifically, I am utilizing the following module for datatable functionality: "@swimlane/ngx-datatable": "^19.0.0", Here is how it is implemented in ...