Display a still image using the image tag within Angular 2

I am struggling to attach an image to the image tag in Angular 2.

My application has the following structure:

https://i.sstatic.net/svBE1.png

In the choice.Component.html view, I want to display the UserDefaultImage.png image within an image tag.

I have tried various paths like below, but none have worked:

<img src="../images/DefaultUserImage.png" />
<img src="./images/DefaultUserImage.png" />
<img src="/images/DefaultUserImage.png" />
<img src="app/images/DefaultUserImage.png" />
<img src="/app/images/DefaultUserImage.png" />

What path do I need to use to make it work?

angulartypescriptangular2-templateangular2-formsangular2-directives

Answer №1

Once you navigate to the browser and inspect the element, you'll discover the image path as follows:

http://localhost:3000/images/DefaultUserImage.png

To properly organize your files, move the images folder into the assets directory and update your code like so:

<img src="assets/images/DefaultUserImage.png" >

Answer №2

From: https://angular.io/guide/quickstart

assets/* This directory serves as a storage space for images and various files that will be copied as-is during the application's build process.

Example usage: 

<img src="assets/images/test.png" />

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

Tips for successfully passing function variables as parameters to Angular 2 HTTP subscribe callbacks

I attempted this.propositionService.addProposition(this.proposition) .subscribe(this.addSuccessCallback, this.addFailureCallback); The issue I am encountering is that both addSuccessCallback and addFailureCallback do not have acces ...

angulartypescript

The code for filtering an array in Angular 9 seems to be failing to display the expected filtered items

Here is the JSON data: [ { "products": [ { "id": "1", "name": "Apple", "price": "free", "category": "Fruits" }, { And so on And this : [{ "categories": [ ...

jsonangulararray-filter

Encountering CORS Error Despite Having CORS Enabled in Nest.js/Angular Application

Currently, I am in the process of developing a small calculator application as a means to gain expertise in Nest.js and Angular. In order to achieve this, I have established a server that hosts a basic web API equipped with several endpoints. One particula ...

angularangularjscorsnestjs

Interactive functionality of drilling down into charts

I am encountering a null value for the canvas element in my TypeScript code. The scenario involves a static pie chart that, upon clicking, should drill down to its child pie charts. Within the onclick functionality, I attempt to hide the parent and displa ...

angularchart.js

The tRPC setData hook is limited in its ability to access all data necessary for optimistic UI updates

As I integrate mutations using tRPC and React Query to optimistically update my UI upon adding a new item, I've encountered an issue. The problem lies in the query I'm updating, which requires specific properties like auto-generated IDs or datab ...

typescriptnext.jsreact-querytrpc.iooptimistic-ui

React JS displayed the string of /static/media/~ instead of rendering its markdown content

When I looked at the material UI blog template, I created my own blog app. I imported a markdown file using import post1 from './blog-posts/blog-post.1.md'; Next, I passed these properties to this component like so: <Markdown className=" ...

reactjstypescriptmaterial-uimarkdown

Guide on specifying the return type for Rx.Observable.fromPromise() in TypeScript

My current problem involves a function that returns an Rx.Observable created from a promise. Here is the code snippet: var data$ = fetchData(); fetchData() { return Rx.Observable.fromPromise(fetch("someUrl")); } When I hover over the variable data$ i ...

typescriptpromiserxjsobservable

The improper utilization or replacement of Jest mock in an Angular standalone component's unit test is causing issues

Presented here is a streamlined Ionic/Angular component with unnecessary code removed. import { IonicModule, ModalController } from '@ionic/angular'; @Component({ selector: 'my-component', templateUrl: 'my-component.html' ...

javascriptangularunit-testingjestjsjasmine

Having trouble retrieving a dynamic name with Formcontrol error?

I keep encountering a typeError in this section of code <p *ngIf="formValue.controls['{{obj.name}}'].invalid, but when I manually enter it like this *ngIf="formValue.controls['uname'].invalid it works perfectly fine. What ...

javascriptangular

Creating a function that can have either one or two arguments, with the types of the arguments determined by a specific string literal

I am looking to create a function called emitEvent(event, extra?), which will be restricted by a string literal enum of known strings such as POPUP_OPEN and POPUP_CLOSED. The function will accept a second argument that is a specifically defined dictionary ...

typescriptoverloadingtypescript-generics

Learn how to effectively utilize the filter method in Angular to target specific array field values for filtering

I have implemented a functionality to add multiple groups by searching from a list of group arrays. Each group has roles assigned to it (refer to the listOfgroupsWithRoles array). During the initial search, all the groups are returned in the array. If a g ...

angulartypescriptangular9angular-filters

Sending multiple types of data objects, including files, through a multipart data

Attempting to send multiple files to my REST API using PrimeNG: <p-fileUpload #fileInput name="myfiles[]" customUpload="true" (uploadHandler)="myUploader($event)" multiple="multiple" accept="*" maxFileSize="2000000" ...

angularfilemultipartform-dataprimeng

Align Angular Material 2 Card Header Buttons to the Right

I'm currently using Angular Material 2 and I'm trying to add icon buttons to the card header. How can I align these buttons to the right side? Here is what I'm aiming for: https://i.sstatic.net/miqZn.png Current layout: https://i.sstatic.n ...

angularangular-material2angular-flex-layout

Error encountered while utilizing Array.find with a specific data type

I am trying to locate the user's browser language from a list of supported languages. Here is the code snippet I am using: const userLanguage = browserLanguages.find(language => !!supported[language]); But unfortunately, I'm encountering thi ...

typescript

Exploring TypeScript's generic features and conditional types in function parameters

Imagine having a function that retrieves the return value of a provided getIdentifier function. This function is necessary, except in cases where the item contains an id property, in which case we can simply read that value. type FuncArg<T> = T exten ...

typescripttypescript-generics

Unable to display image in Angular 2

Hey there, I'm facing a simple problem. I'm having trouble displaying images in my Angular 2 app. This is how I am trying to add an image: <img alt="logo" [src]="'./images/logo.png'"> Do I need to install any specific package ...

imageangular

Typescript's type mismatch does not result in a compile time error

Within my code, I have a function with the following definition: export async function removeUser(deleteUserId: Types.ObjectId) There was an instance where I mistakenly called this function and passed a Mongoose object's id parameter, which is a stri ...

typescriptmongodbmongoose

Error: Unable to access $rootScope in the http interceptor response function

I have set up an interceptor to display an ajax spinner while loading. interface IInterceptorScope extends angular.IRootScopeService { loading: number; } export class Interceptor { public static Factory($q: angular.IQService, $ro ...

angularjstypescript

What is the internal mechanism used by Angular for routing implementation?

My traditional belief about web browsers has been challenged by the behavior of Angular. I used to think that when a user enters a new URL, the browser would fetch a whole new page from the network and display it, replacing the old one. But with Angular, ...

angularbrowser

Tips for troubleshooting JavaScript in an Angular 5 application using Visual Studio 2017

I recently developed an Angular 5 web application using VS2017. Initially, the app was functioning well until I decided to enable javascript debugging. Post that change, upon launching the app, I encountered the following error: https://i.sstatic.net/ygq ...

angularvisual-studio