The image referenced in the assets folder could not be located within the SCSS

Although I've come across similar questions, none of the solutions provided seem to work for me. I've tried them all, but they just don't seem to do the trick.

My goal is quite simple - I just want to set a background image using CSS. However, every time I try, I encounter an error stating that the image not found.

When I use an image from the assets folder in HTML like this: 

<img src="assets/images/news-placeholder.png" alt="news-image" />
everything works perfectly fine.

The approach 

url('/assets/images/wallpaper.jpg')
in CSS also works, but only on my localhost. When deployed on the server, the image cannot be found because there is no assets folder in the root directory. This has been the main issue I've been facing. Additionally, even though the image shows up, my IDE (PhpStorm) is unable to resolve the assets directory.

I discovered that using 

url('assets/images/wallpaper.jpg')
seems to be the most effective method. However, when I implement this solution, I get an error while on localhost stating that it cannot resolve the path of the image within the component directory, such as 
/src/app/modules/portal/components/page-header
.

cssangular

Answer №1

In case your application is hosted at a location other than the root path of the host, such as www.example.com/apps/myApp rather than www.example.com, it must be constructed using the correct --base-href flag, as shown below:

ng build --prod --base-href /apps/myApp

Answer №2

Ensure that the assets folder has been included within the build settings in angular.json as shown below.

"assets": [ "src/favicon.ico", "src/assets" ]

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 the color of the wishlist icon be modified in Reactjs when the item is available in the database?

Is there a way to change the color of the wishlist icon based on whether the item is in the database? If the item is present, its color should be brown, and if it's not present, the color should be black. Additionally, I want the ability to toggle be ...

javascriptcssreactjs

Create a precise layout for a footer design

I recently revamped a footer using a new UI framework in an attempt to improve it. Despite my efforts to align it properly, I encountered issues with overlapping on the right side. I experimented with using <div> and applying styles to create a diffe ...

cssreactjsmaterial-uifooter

Encountered an issue in GoJS with Angular 4: ERROR TypeError: Unable to access property 'class' of null at Function.F.fromJson.F.fromJSON

I have just started exploring GoJS and decided to create a sample project by utilizing the Kanban sample available on the GoJs website. I attempted to use Angular and Typescript for this, but encountered an error. AppComponent.html:1 ERROR TypeError: Cann ...

angularhtmltypescripttypescript2.0gojs

By default, the first table row is displayed when using table grouping in AngularJS

I am attempting to display only the first tr in the table and hide all other tr elements by default. I have tried using ng-show and ng-hide but it does not seem to be working as expected. This is not originally my plunker; I used it for reference on group ...

htmlcssangularjs

angular 2 text box clearing functionality appears to be malfunctioning

I am currently working on implementing a reusable search box in Angular 2. Although the code is relatively basic, I am new to Angular 2 but have some experience with Angular 1. I am facing an issue where the value is not clearing when the text box is foc ...

javascriptangular

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

What is the reason for the ID "home-ad" not functioning properly in Firefox?

While working on some CSS styling, I encountered an issue with the ID "home-ad" not displaying properly in Firefox. The box model was showing a content size of 0x-40 (with 40 being the padding value). Interestingly, when I changed the ID name, the code wor ...

htmlcssfirefox

Use JavaScript to load and set a background image for a div

When it comes to loading different images onto an "img" tag by printing their URLs using JavaScript and then letting CSS manipulate the content in the tag, I have a code snippet that does just that. $(window).load(function() { var randomImages = [&apo ...

javascriptjquerycssbackgroundonload

Update AngularJS from version 1.2.6 to Angular 16 in order to resolve the Material issue

Currently, I am working on a project that involves upgrading AngularJS version 1.2.6 to Angular 16. However, I have encountered a significant challenge in understanding the variances between AngularJS material and Angular material. For example, in Angular ...

angularangularjsangular-material

Issue with React-Route not displaying components

Below is the code snippet from my app.js file: <Router> <Header title="My Todos List" /> <Routes> <Route path="/about" element={<About />} /> <Route path="/" ...

javascripthtmlcssreactjs

What sets [NgClass] apart from [class] in Angular JS2?

Consider a view element with the following three attributes: class="red" [class]="isGreen ? green : cyan" [ngClass]="'blue'" Does Angular merge the output of these attributes or does one override the others? If we have: [class]="getElementCla ...

angularbinding

How can I efficiently showcase computed values on a series of components in Angular using a specific pattern?

Within my app are tabs that display different types of input data retrieved from a database. These inputs are used to calculate various metrics across multiple tabs, including one tab that integrates a 3rd party websocket for live data calculations. All t ...

angular

Creating a sleek animated analog clock using CSS and jQuery

I am facing a small issue with my CSS3/jQuery analog clock. Currently, the movement of the clock hands is a bit abrupt. I would like the animation to be smooth. I attempted using transition: all .1s, but it gets messy when the clock hands reach the top po ...

javascriptjquerycss

Fixing the "Cannot find name" error by targeting ES6 in the tsconfig.json file

I recently started learning AngularJS through a tutorial. The code repository for the tutorial can be accessed at this link. However, upon running npm start using the exact code provided in the tutorial, I encountered the following error: Various TS2304 e ...

jsonnode.jsangulartypescriptnpm

Designing the Mailchimp signup form with React styling techniques

I downloaded the NPM React module for Mailchimp from this link: https://www.npmjs.com/package/react-mailchimp-form. It works well and provides all the necessary forms, but I'm having trouble customizing its style. The documentation suggests adding a ...

cssreactjsmailchimp

The icon for the ng-bootstrap datepicker calendar is not showing up

I recently implemented a date picker using angular-cli and ng-bootstrap. The datepicker is working perfectly after installing it from npm and adding it to the main module. However, I am facing an issue with the icon not displaying properly. Check out the ...

angulardatepickerng-bootstrap

Switching the background image dynamically in Vue.js upon page access

My goal is to update the 'background-image' when the page is accessed. export default { created () { document.getElementsByTagName('html')[0].style.background = "url('../assets/background-blur.png') center" } } //Logi ...

javascriptcssvue.js

Adjust the appearance of the scrollbar with custom CSS, but be aware that the typical methods may not be effective in

I am interested in customizing the appearance of scrollbars on my website. After coming across this tutorial on W3Schools titled W3S: How TO - Custom Scrollbar, I successfully applied the changes on Chrome, but unfortunately, it did not work on Firefox. H ...

htmlcssscrollbar

Mastering responsive layout design in Nextjs using Tailwind CSS

I am attempting to design a card layout where the image is on the left and the content of the card is on the right using flex in NEXTJS and Tailwind CSS. My goal is to ensure that the image remains responsive. <div className="block"> < ...

cssnext.jstailwind-cssnext-images

What is the best way to extract and connect data from a JSON file to a dropdown menu in Angular 2+?

Here is an example of my JSON data: { "Stations": { "44": { "NAME": "Station 1", "BRANCH_CD": "3", "BRANCH": "Bay Branch" }, "137": { "NAME": "Station 2", ...

jsonangulartypescriptapi