Tips for accessing images in Angular 2\4 lazy loaded modules

I have a collection of images that need to be shared throughout my application. There are 2 lazy-loaded modules - Login and Overview. The image I require is located in src/assets/images/logo.png and needs to be accessible in both the Login and Overview components.

The current project structure looks like this: (prefixed numbers represent levels for reference)

-0_ProjectName
 -1_src
   -2_assets
     -3_images
       -4_logo.png
   -2_modules
     -3_login
       -4_containers
         -5_login.component.scss
         -5_login.component.ts
         -5_login.component.html
     -3_overview
       -4_containers
         -5_overview.component.scss
         -5_overview.component.ts
         -5_overview.component.html

How can I reference src/assets/images/logo.png within the respective scss files of the Login and Overview modules? When attempting to specify the image path as "../../../assets/images/logo.png" (going up 3 directories) in the scss files (login.component.scss and overview.component.scss), an error message stating that the image cannot be found is displayed.

Error log: ./src/modules/login/containers/login.component.scss Module not found: Error: Can't resolve '../../../assets/images/logo.png' in 'C:\Users\deepak\A2Workspace\ProjectName\src\modules\login\containers'

imagecssangular

Answer №1

If you are utilizing Angular CLI, the assets directory is automatically copied to a different location. You can easily reference an absolute path using the root:

background: url(/assets/images/logo.png)

Answer №2

Make sure to add the following code snippet in your index.html file right after the head tag.

   <base href="/">

The base element informs the Angular router about the static part of the URL, allowing it to only modify the remaining part.

In your scss file, you can reference assets like this:

     background-image: url(../../../assets/images/logo.png)

If you are using Webpack, ensure to resolve paths by configuring it in the webpack config file. For more information, refer to this stackoverflow answer.

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

How can Observables be designed to exhibit both synchronous and asynchronous behavior?

From: Understanding the Contrasts Between Promises and Observables In contrast, a Promise consistently operates asynchronously, while an Observable can function in synchronous or asynchronous manners. This presents the opportunity to manipulate code in ...

javascriptangulartypescriptasynchronousrxjs

Error: The background image is not displaying correctly on the .net webpage

I have included a link to an image but I am having trouble getting it to show up on my website. I even tried putting the image in a different folder, but still no luck with displaying it. Any assistance on this matter would be greatly appreciated. I hav ...

htmlcssbootstrap-4

In a responsive design, rearrange a 3-column layout so that the 3rd column is shifted onto or above the

My question is concise and to the point. Despite searching online, I have not been able to find any information on this topic. Currently, my layout consists of 3 columns: ---------------------------- |left|the-main-column|right| ------------------------- ...

javascriptjqueryhtmlcssresponsive-design

Align the elements of the contact form to the opposite sides

I am experiencing an issue with my contact form where all elements are flowing horizontally instead of vertically. I would like everything to be floated to the left and aligned vertically, except for the "message" box and submit button which should be on t ...

csscss-floatcontact-form

What is the best way to modify the quantity property of a cart item object within the framework of this Angular 13 online shopping application?

I am currently developing an e-commerce app with a front-end built using Angular 13. The following code snippet is designed to calculate the total price of items in the shopping cart: import { Component, OnInit } from '@angular/core'; @Componen ...

javascriptangulartypescriptangular13

Utilizing MSAL to seamlessly retrieve tokens with the assistance of an HTTP interceptor

When encountering a 401 error in Angular, I am attempting to invoke the MSAL silentTokenrefresh method within the authInterceptor. The goal is to retrieve a new token and then retry the failed request seamlessly so that the service remains uninterrupted. F ...

javascriptangularsingle-page-applicationazure-ad-msalangular-http-interceptors

Discovering and Implementing Background Color Adjustments for Recently Modified or Added Rows with Errors or Blank Cells in a dx-data-grid

What is the process for detecting and applying background color changes to the most recently added or edited row in a dx-data-grid for Angular TS if incorrect data is entered in a cell or if there are empty cells? <dx-data-grid [dataSource]="data ...

angulartypescriptdevextremedevextreme-angulardx-data-grid

Unable to load CSS background image and update code

After writing the code in my CSS file, /*The code I initially wrote*/ .wrapper::before { content: ""; position: absolute; bottom: -30%; left: 0; height: 100%; width: 100%; background: url(../img/homeTrans2.svg) no-repe ...

htmlcss

Why isn't the z-index functioning properly in Vue.js styling?

I am currently developing a simple component that displays four steps, indicating the current step and allowing users to navigate through them. I want to create a design where these numbers are enclosed within circles that are evenly distributed in a line ...

htmlcssvue.jsz-index

Resolve the issue of Dojo images not appearing on a div in Internet Explorer

I am trying to incorporate images into a dojo chart using the given code: var l_images = ["images/clearnight.png","images/clear.png","images/partlyCloudy.png","images/cloudy.png","images/showers.png","images/rain.png","images/thunderstorms.png","images/ic ...

cssinternet-explorer-8dojox.charting

Using Twitter Bootstrap 3 and 2 alongside Angular 2 for web development

Our current Main application is developed using Angular 1.4 and incorporates Twitter Bootstrap 2.3.2. This application includes various components built with Angular 1.4 by different teams, We are now looking to create new components using Angular 2, and ...

twitter-bootstrapangulartwitter-bootstrap-3

Website experiencing issues with image sizing

On my website, in the Current Books section, I have a row of images. To ensure that all the images are the same height, I initially set the height of the HTML book image to 378 using: <img alt="HTML & CSS" height= "378" src="html.jpg"> Using ...

jqueryhtmlcss

Navigating to a different page in Ionic 2 when a link or button is clicked

When I click on the link provided below, it should take me to the home page. However, I am facing issues and it is not redirecting me as expected. I want to be taken to the home page when clicking on the specified link or button. Do I need to add any Ang ...

htmlangularionic2

What is the approach to constructing an observable that triggers numerous observables depending on the preceding outcome?

One of my endpoints returns { ids: [1, 2, 3, 45] }, while the other endpoint provides values for a given id like { id: 3, value: 30, active: true }. I am currently attempting to create an observable that will call the first endpoint and then, for each id r ...

angulartypescriptrxjsrxjs6

AJAX: Bringing in new content to display beneath the triggering page

Here is the code for my main page: <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> div { width:100%; ...

javascriptjqueryhtmlcssajax

Using an image instead of a checkbox when it is selected (Angular 4/Ionic 3)

Is there a way to swap out the checkbox for an image? I want this image to change dynamically based on whether the checkbox is checked or not. Unfortunately, adding a class doesn't seem to do the trick as it modifies all icons in the same column. The ...

javascriptcssangularionic-frameworkionic2

Elements in table do not display properly in Internet Explorer

The alignment of the list element is off-center in Internet Explorer, whereas in Chrome it is perfectly centered. Below is a snippet of the code being used with the Bootstrap CSS Framework. Here is the JSfiddle https://jsfiddle.net/8cunpsvy/ ...

cssinternet-explorerbootstrap-4

Guide on integrating signalr.js into webpack within Angular 2 environment

Every time I try to use SignalR, I encounter the following error message: $.hubConnection is not a function Error: jQuery was not found. Make sure that jQuery is included before the SignalR client JavaScript file. Checking with console shows "$" and ...

angularwebpacksignalr

Tips for styling Ajax.ActionLink elements with CSS

Hi there, I'm trying to style a navigation bar using CSS. I'm pulling the navigation bar values from a database using Ajax.ActionLink. I attempted to use JavaScript but encountered an error stating "jQuery is not defined", Here's the cod ...

javascriptjquerycssasp.net-mvcasp.net-ajax

What is the reason behind the CSS not rendering when async:false is used?

I find it peculiar and am actively seeking an explanation for this anomaly. In my code snippet, the AJAX call seems to be causing unexpected behavior: $('.edit-config').click(function() { var that = this; var msg; ip ...

javascriptjquerycssajaxasynchronous