Incorporate custom SVG icons from local sources into the project

Having an issue rendering an SVG on the screen using CSS. File structure is as follows: 

Root > Assets > Icon > user-icon.svg
. Attempting to add it using CSS like this:

.user-element {
  background-image: url(/assets/icons/user-icon.svg);
}

The SVG is not showing up on the screen, and I'm encountering this console error:

GET http://localhost:4000/assets/icons/user-icon.svg 404 (Not Found)

Just looking to find the SVG in my local file system without making a network request. Any assistance would be appreciated. Thank you!

csssvgvue.js

Answer №1

If you're having trouble with the URL, try adding ./ in front of it and enclose the path in quotes using '', like this:

.user-element {
  background-image: url('./assets/icons/user-icon.svg');
}

If it still doesn't work, it may be due to an incorrect path.

Based on your question, it seems that the icon is located at assets/icon/user-icon.svg, but your CSS code references assets/icons/user-icon.svg, indicating that the path is incorrect. Try using the corrected code below:

.user-element {
  background-image: url(./assets/icon/user-icon.svg);
}

Answer №2

If you use a URL that consists only of a path, the browser will automatically add the scheme, server and port of the current page. For accessing the local filesystem, consider using the file scheme.

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

Incorporating flip and slide transitions for an engaging visual experience

Hey everyone, I'm currently working on creating a web flash card. The functionality I want is for the card to flip when clicked, but if I click on the navigation it should smoothly slide to another card, similar to a slideshow. If anyone has a demo or ...

javascripthtmlcss

I noticed that my CSS style sheet is only working on three of my pages. What should I do to make sure it affects the fourth page as well?

I am currently facing an issue with my website where I have linked one .css stylesheet to 3 different pages. This is just a temporary template until I finalize the individual look of each page. After performing some div positioning on the site, most pages ...

htmlcsstransition

Navigation Menu Dropdown Present on the Right Side and Arranged in a Horizontal Stack

I'm having trouble with a dropdown menu in my navigation bar. I followed the example on W3Schools but when I hover, the menu appears horizontally instead of vertically and to the far right of the page. I've searched for solutions but can't s ...

htmlcssnav

Are there any alternatives similar to the reverse sr-only feature in Bootstrap 4?

I implemented the use of .sr-only to ensure compatibility with text-based browsers such as Lynx. This allows for the display of an ASCII logo in the header for those using standart GUI browsers like Firefox, while displaying the normal graphical logo for o ...

csshtmltwitter-bootstrapbootstrap-4

What steps should I take to guarantee that the container's width is equal to or greater than the longest text and that all of the text is in plain view

I'm encountering an issue with a navigation dropdown menu inside a container. The HTML and CSS provided are intended to showcase a language dropdown menu, but I'm struggling with the container not adjusting its width based on the longest text wit ...

htmlcssflexboxcss-position

Looking to filter JSON data with Vuejs?

I am trying to search through this JSON array for a specific key: track_order The data I receive from the server is stored in the orders variable: "records": [ { "phone": "09********8", "fullName": "******", ...

arraysjsonvue.jssearch

Ensure the heading expands to fit the container and include > at the conclusion

Could anyone help me create a heading effect link similar to the one on BBC's website at ? I'm specifically looking to achieve an effect where the heading text is on the left and an arrow is displayed on the right. Additionally, I would like both ...

htmlcss

"Hiding elements with display: none still occupies space on the

For some reason, my Pagination nav is set to display:none but causing an empty space where it shouldn't be. Even after trying overflow:hidden, visibility:none, height:0, the issue persists. I suspect it might have something to do with relative and ab ...

javascripthtmlcssmasonry

Angular Filtering: Enhancing User Search Experience [Part 2]

When attempting to import the 'CommonModule', I encountered the same error message. However, when trying to write "of" between car and cars, it highlights the word filter as an error and displays: No pipe found with name 'filter'. I am ...

htmlcssangulartypescript

While developing my Vue.js project, I encountered an unexpected issue

I started a fresh project using Vue Js and encountered an issue. Code snippet: export default { name: 'welcome', mounted: function() { $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", ...

vue.js

Vue js and its integration with Summernote are posing challenges

Having trouble integrating summernote with my vue js application. The wysiwyg editor is not binding with my variable by default. Can someone please offer assistance? Here is how I am trying to display it: <div id="summernote" name="edit ...

laravelvue.jssummernote

I require the box element within my section element to have a full-width layout

Looking at the code in the image, you can see that I am using MUI components. Within a section, there is a box containing navigation filter links. The red part represents the section, while the white inside is the navigation link bar. My goal is for this b ...

htmlcssreactjsmaterial-uibox

A guide to crafting a cross design using only CSS

Is it possible to create a cross design in pure CSS that overlaps an image inside a div? Or would I need to create a new image with the cross included? ...

htmlcss

CSS - Implementing Multi-Line Text Wrapping

Can anyone provide some guidance on how to handle an issue where having too much text in the description of an image pushes the image up? Thank you. I have created a basic fiddle - resize the window to see them inline. JSFiddle div.gallery { border: ...

htmlcssflexboxalignment

Tips on designing checkboxes with CSS

Can someone help me figure out how to style a checkbox using the code below? <input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /> I've tried applying this style but it doesn't seem to work. The chec ...

htmlcsscheckbox

Ways to adjust overlay background height based on fancybox content height (be it a sizeable overlay or a scrolling page)

Can anyone help me figure out how to adjust the overlay background height (overlayOpacity portion) in fancybox 2 to match the content height with no extra spaces at the top and bottom of the fancybox? Here is the code I'm currently using: jQuery.fan ...

jqueryhtmlcssfancyboxfancybox-2

Refreshing events in FullCalendar 5 using Vue.js's refetchEvents

I am currently integrating FullCalendar with Vue.js. My goal is to reload the events when the refreshCal() function is triggered, thereby rendering the calendar on the screen using refetchEvents. I have two main components: The Calendar: here is the code ...

ajaxvue.jsfullcalendar-schedulerfullcalendar-5

What are the reasons for avoiding placing CSS code directly within HTML?

Situation: My website is dynamically served, with all CSS and javascript directly embedded into the HTML document to optimize speed. Advantages: Reduces web requests Fewer files downloaded Speeds up webpage loading time Disadvantages: Potential cachin ...

javascripthtmlcss

Is there a way to override the padding of a container?

Working with Wordpress for the first time has been quite a challenge. Adjusting to everything is causing me some major headaches. So, I've got this container div and added a lazy 10px padding. However, for the theme I'm attempting to develop, I ...

csshtmlpadding

Encountering an unforeseen issue with my code

I am currently developing a web application in advanced Java and incorporating various external libraries such as choosen.js, summernote.js, Bootstrap, BootstrapValidator, etc. I have encountered some errors and am struggling to pinpoint the root cause of ...

jqueryhtmlcsstwitter-bootstrap-3summernote