CODEWITHSUNDEEP
angularroutes
mohammad mozafari
mohammad mozafari

Reputation: 43

How to use local images in angular while using routes?

I'm very new to angular and I'm recently learning routes but I have a problem. In my app I use the following routes. My problem is when I try to link to an image in assets folder I get an error that there is no route for the link and the image is not shown. How can I fix that?

Here is the routes I defined:

const routes: Routes = [
  { path: '', redirectTo: '/recipes', pathMatch: 'full'},
  { path: 'recipes', component: RecipesComponent},
  { path: 'shopping-list', component: ShoppingListComponent},
];

Image path : src\assets\images\tastySchnitzel.jpg

Error : Cannot match any routes. URL Segment: 'assets/images/tastySchnitzel.jpg

Upvotes: 1

Views: 3094

Answers (2)

Sachit Tewary
Sachit Tewary

Reputation: 21

Keep the path as below. This solved the same issue for me :

<img src="/assets/images/tastySchnitzel.jpg" />

Just add / before assets.

Upvotes: 1

Kıvan&#231; B.
Kıvan&#231; B.

Reputation: 152

I didn't understand exactly what he wanted to do. But I leave two examples here, I hope that there will be a solution for you;

If you want show image;

<img src="assets/images/tastySchnitzel.jpg" />

If you want open image in a new tab;

<a href="assets/images/tastySchnitzel.jpg">Link to Image</a>

Upvotes: 0

Related Questions