How to reference ASP.NET Core Blazor static files within a css asset

The latest enhancement in .NET 9.0 known as MapStaticAssets is designed to improve the deployment of static asset files. It addresses issues like outdated assets in browsers and allows for the delivery of compressed versions of assets. To include a static file from an asset in a Razor component, you can simply specify its path using the @Asset directive like this:

<img src="@Assets["/images/picture.jpg"]" />

But what if you need to access your asset file outside of a Razor component, like when setting a background image in CSS? Example:

.section { background-image: url("images/background.jpg"); }

Answer №1

Integrating the latest static assets middleware using MapStaticAssets() allows for incorporating a component named ImportMap into your app.Razor file, making it accessible across your application to map static assets while rendering Blazor components.

In your App.razor:

<head>    
  <ImportMap />
</head>

When inspecting the source code of the rendered pages, you will discover the "mapped" assets with their fingerprinted filenames (e.g., my-image.doc2ew1kj4.png).

To explore further, check out: static asset delivery optimization, static asset delivery in server-side Blazor apps, and import maps

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

In what location is it possible to define this CSS property?

After inheriting a website, I am encountering CSS issues that are driving me crazy. There is a mysterious div element with a height of 185px that is causing content truncation problems. The strange part is that this height is not defined anywhere in the st ...

Create a nested table with a table-layout set to auto and a width of 100%, allowing for overflow when the window

How can I achieve a table with table-layout: auto and a 100% width that overflows horizontally when the window is too narrow without showing a scrollbar? Consider these examples: WORKING EXAMPLE 1 <div style="width: 100%; overflow-x: auto"> &l ...

Tips for changing images when hovering over them

Currently engaged in the development of an e-commerce application, where I am looking to accomplish a specific task... https://i.sstatic.net/sYoG8.png The objective is to display the corresponding large image on the big box when hovering over smaller ima ...

Issues with sublevels not appearing when clicking on a DropDown Button in Html and CSS

I recently encountered an issue while using CSS and HTML in my email to create a Drop Down List. After clicking on the Drop Down Button, the sublevels were not visible. Can someone please assist me in resolving this problem? Any help would be greatly appre ...

Checking the validity of CSS selectors

I recently came across a CSS Selector Tester tool at the following link: http://www.w3schools.com/cssref/trysel.asp Is this tool reliable? It showcases some unique selectors such as: p:first ul li:eq(0) :contains(Duck) However, I encountered an iss ...

Tips for utilizing DateRangePicker in a C# Razor page

I'm having trouble figuring out how to implement a date range picker on a C# Razor Page. While there are examples available for singular date pickers, I haven't found much guidance on date ranges. The page I'm currently working on utilizes ...

Ensure that two div elements always expand to occupy the entire width of the parent div container

Despite my research and understanding of floats, I am struggling to comprehend why I am unable to evenly float two divs within a wrapping div. #wrap { border: 1px solid red; height: 200px; width: 100%; } #gr1 { border: 1px solid blue; ...

The sticky sidebar feature in Bootstrap 4 is not functioning correctly as it scrolls with the page instead of

I'm trying to create a sticky right sidebar titled "Recent Posts in Category" on this page. I want it to stay fixed when the user scrolls down. Since Bootstrap 4 no longer supports the affix feature, I attempted to accomplish this using CSS. I came a ...

Utilize varied CSS files for distinct sections within two different subdirectories

In my Angular application, I have created two sub-roots under the main app root: websiteMaster and systemMaster. I want the CSS files of the website to be loaded only when a user is logged in, and the CSS files of the systems to be loaded only when a us ...

How can I adjust margins based on the positioning of surrounding elements?

Apologies if the title is not accurate, but I will try my best to explain clearly. If you have any ideas on how to improve it, please share, and I will make changes. Here is the issue I am facing: https://i.sstatic.net/kGMjw.png (I apologize for any lang ...

Create a darker background for white text using CSS

Looking to showcase multiple images within cards with text overlay. These images are user-uploaded and can vary in color, so the white text must be solid without any transparency issues like in the sample fiddle provided. Check out this example fiddle - h ...

Is it possible to merge elements into a carousel in the mobile display?

I have a collection of elements that I would like to combine into a swipeable carousel. Is there a way to achieve this, specifically to make it a carousel only in mobile view? If needed, here is the HTML code. Thank you for your assistance. <div class= ...

Display a single item from the Bootstrap carousel on mobile devices

Seeking help with my Bootstrap Carousel - displaying 2 items on Desktop but wanting to show one item at a time on Mobile. Any solutions? Visit this link for more info HTML Code: <div class="container"> <div id="myCarousel" class="carousel sli ...

Tips for incorporating mapbox.js as a background while keeping html content and Navbar consistently displayed on top

I am currently integrating MapBox.js into a Bootstrap 3 website. The main concept is to utilize a map as the background for a row that occupies the full width of the site, with html-content displayed on top. To ensure MapBox.js remains in the background, I ...

Ensuring image stays centered always

I have a logo image that I want to center regardless of window size. Despite trying auto margins, I haven't been successful in achieving this. The logo image needs to overlap the bottom of my navigation bar, which is positioned above the logo. HTML ...

How can you align a list next to a set of images using HTML and CSS?

When working with these images in my code, I need to create a list alongside them: <div class="asideContent"> <ul> <li> <p> </p> </li> <li> <p></p> </li> ...

`<a> The value does not appear upon page load`

As a newcomer to development, I am currently experimenting and creating a sample dashboard. However, I am facing an issue where the sidebar value does not display upon loading the page. I have to manually click on a list in my sidebar for it to appear. Th ...

The alignment for Bootstrap's NAV element within a display:table-cell element seems to be off when viewed on Firefox浪

Here is an example of HTML markup with Bootstrap library included: <div class="container"> <div class="card"> <ul class="nav list"> <li class="element"> <a href="#">Element</a> </li> ...

Designing unique icons through image manipulation in CSS

I am currently experimenting with creating an icon that functions similar to font-awesome. When I apply a specific class, it should display an image based on the font size. Surprisingly, I got it to work in Chrome but for some reason, the same code doesn&a ...

Why is the Div element configured as a block?

It's interesting that I occasionally encounter a DIV element being set to display:block. Is there a specific rationale behind this, given that DIV is inherently a block-level element? ...