Is there a way to adjust a background url in CSS :after using VueJS?

I am currently using simple-webpack vuecli to build my website. I have a button with a :after pseudo-element that generates content with a background image url. Is there a way to utilize the require function for the background-url in CSS? It seems like inline styling is not working for the :after pseudo-element.

Global SCSS

.btn-green .btn-text:after{
  content: "";
  width: 7px;
  height: 10px;
  background: url('/assets/img/svg/arrow-right.svg') no-repeat 0 0;
  background-size: 100%;
  display: inline-block;
  margin-left: 5px;
  padding-bottom: 11px;
}

Vue Template

<div class="btn-green universal-shadow">
  <div class="btn-text">GET STARTED</div>
</div>
htmlcsssassvue.jsvue-cli

Answer №1

To prevent Webpack from mistaking it for a URL, make sure to specify a relative path instead of an absolute one when importing a module.

url('assets/img/svg/arrow-right.svg')
     ^ Ensure the leading / is removed

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

What could be causing WidgEditor, the JavaScript text editor, to fail to submit any values?

After clicking submit and attempting to retrieve text from the textarea, I am encountering a problem where the text appears blank. The reason for this issue eludes me. function textSubmit() { var text = $("#noise").val(); console.log(text); consol ...

javascripthtmltextareatext-editor

What is the best approach to animating a specified quantity of divs with CSS and javascript?

How neat is this code snippet: <div class="container"> <div class="box fade-in one"> look at me fade in </div> <div class="box fade-in two"> Oh hi! i can fade too! </div> <div class="box fade-in three"& ...

javascriptcss

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

I am working with a mat input field that has two-way data binding using ngModel, and I want to add validation using mat-error and formControl. <mat-form-field [formGroup]="myForm"> <input matInput formControlName="myFormName" autocomplete="off" ...

htmlangulartypescript

The font-family CSS properties inheritance is not functioning as I had anticipated

I'm currently working on a webpage where I want to add a list of links that resemble tabs. While this style is functioning correctly for the main pages, I'm having trouble implementing it for a new section. The existing list is located within: ...

fontscss

Accessing the current route in a Vuex module using Vue.js

I've created a vuex store with namespaces that retrieves a specific store entry based on the current route parameter. import Router from '../../router/index' const options = { routeIdentifier: 'stepId' } export function fetchFr ...

javascriptvue.jsvuexvue-routervuex-modules

Using jQuery in Javascript, obtain the chosen radio option and place it within a label tag

I have a radio button for gender selection: <div class="label-inputs" name="userFieldDiv" id="genderUserFieldDiv"> <label class="required">Gender</label> <input type ...

javascriptjqueryhtmlradio-button

Can you explain the media breakpoints in Bootstrap 4 for size up, down, and in between

I'm curious to understand the definitions of media-breakpoint-up, media-breakpoint-down, media-breakpoint-between, and media-breakpoint-only in Bootstrap 4. Can anyone provide an explanation? ...

sassbootstrap-4breakpoints

Utilizing the Download Attribute in HTML 5 with iPhone Devices

Is there a way to download and view files such as PDFs, Word docs, and JPGs on an Ionic progressive web app without leaving the current page? I've tried using the html5-Download attribute on Android, but it doesn't work properly on iPhone. Any su ...

angularhtmlionic2

Linked CSS Bullet Points

Typically, I focus on the backend of websites, but I am now attempting to add a new feature to my resume site. I want to connect bullet points with a vertical line that breaks at each point and does not overlap with the bullets themselves. I have created ...

htmlcsspseudo-element

Place an image at the center with a height set to 100% within a div that has a fixed height and

Apologies for asking about this topic again, but I have been unable to find a solution where the image fills 100% of the height. If you'd like to see the issue in action, here's a link to the jsfiddle: http://jsfiddle.net/BBQvd/3/ I'm just ...

javascripthtmlcss

Positioning a dropdown menu on top of a Google Map in React with JavaScript: Best Practices

I've been attempting to place a dropdown menu at a specific location on my Google Map, specifically in the top right (or top left is also acceptable). Below is the current output I am seeing: Here is the expected result: Modifications After trying ...

javascripthtmlcssnode.jsreactjs

Attempting to conceal image formatting when an image is not available - ACF images customization

When designing my Content Page Template, I added borders, backgrounds, and box shadows to style the images. However, if the optional image field is left empty, it still displays a small box with the css styling. I have been trying to figure out how to hide ...

csswordpressimageadvanced-custom-fields

Issue with Image Transition while Linking

I have been attempting to create transitions between images using links. I followed the steps in 'Demo 6' from this page (http://css3.bradshawenterprises.com/cfimg/), but unfortunately, it did not work as expected on my testing website (danitheme ...

javascriptjqueryhtmlcss

Ways to conceal a personalized context menu for right-click operations

I came across a helpful page (How to add a custom right-click menu to a webpage?) discussing "How to add a custom right-click menu to a webpage" The source does not provide any functionality to hide the menu. Any suggestions on how I can hide the menu? ...

jqueryhtmlcsstwitter-bootstrap-3

Displaying a pop-up to reveal what lies in the background

Whenever I display a popup, the decorative circle appears. I am unsure of how to address this issue. Here is the fiddle link: some code https://jsfiddle.net/MagikMike/pctb9e0n/ Appreciate any help, thank you! ...

htmlcsspopup

The rendering of an HTML page is disrupted in PyQt's QWebView

Currently, I am using PyQt4 version 4.11 with Python 2.7. My goal is to embed an HTML page in a PyQt GUI using QWebView. The HTML content is generated from Plotly offline and simply consists of a bar chart graph similar to this: bar chart self.webView = ...

pythonhtmlpyqtplotly

My objective is to use JavaScript to dynamically update information in an HTML document using data retrieved from a JSON file

Experience the benefits of our membership program: PROGRAMMING var benefitsData = document.getElementById("memberBenefits"); for (var i = 0; i < membershipData.benefits.length; i++){ benefitsData[i].getElementsByTagName('h4')[0].innerHTML = ...

javascripthtmljson

Support for a few breakpoints within Bootstrap

I am tasked with creating only 2 breakpoints for a specific application. These 2 breakpoints are <=768 for mobile and >=1280 for desktop. (No Tablet breakpoint) How do I adjust the $grid-breakpoints to accommodate this setup? I think it should be d ...

csstwitter-bootstrapsassbootstrap-4

What could be the reason for HTML not functioning properly in Bootstrap v5 Popover?

I am facing an issue where the HTML content I'm adding to a Bootstrap v5 popover is not displaying as expected. I have followed the guidelines provided in the documentation, but the results are not what I anticipated. Most of the information available ...

htmltwitter-bootstrapbootstrap-5popover

Steps for assigning a default attribute to all elements

Let's take a look at this code snippet: <form> <input type="text" required="true"> <input type="text" required="true"> <button type="submit">Click</button> </form> Do you think there is a way to assign a def ...

html