images not loading when changing base url in angular JS project

Question

I want to change the base url

when load the application url is http://localhost:4200/#/ I want to change this to http://localhost:4200/carrom/.

For doing this I changed base url to then loading url is http://localhost:4200/carrom#/

How can I change this to http://localhost:4200/carrom...but the images and assets are not loading

For doing this I changed base url to then loading url is http://localhost:4200/carrom#/

The problem is how you define the "src" of your images.the correct is, see that there's no "./" or "../.../" : <img src="assets/images/img1.jpg"> — Eliseo
– Eliseo, Commented Feb 29, 2024 at 7:29

Sarbraj Dulai · Accepted Answer · 2024-02-29 04:35:32Z

0

From what I could make out, you could do either of the below.

Set up routes so that the base url "/" loads the carrom component.

const routes: Routes = [{ path: '', component: CarromComponent }, { path: 'home', component: HomeComponent }, { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page ];

Or call navigate on HomeComponent load

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  ...
})
export class HomeComponent {

  constructor(private router: Router){
   this.navigate()
  }

  navigate(){
    this.router.navigate(['/carrom']) // assuming this the route of the carrom component
  }
}

answered Feb 29, 2024 at 4:35

Sarbraj Dulai

18013 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harshit Awasthi Over a year ago

but how do we inject router object in Home Component

Sarbraj Dulai Over a year ago

You won't be adding routing to the page, but the entire application. samjulien.com/add-routing-existing-angular-project Just thought of another hacky way of doing it, look for <app-component></app-component> and replace it with <carrom-component></carrom-component>. This is not the right way of doing it, but will achieve what you want temporarily

Collectives™ on Stack Overflow

images not loading when changing base url in angular JS project

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related