What is the best way to set a CSS background using vue-cli 3?

What is the process for setting a CSS background in vue-cli 3? I have set my vue.config.js like this. Is publicPath properly configured?

JavaScript

const path = require("path");
module.exports = {
  devServer: {
    port: 8081,
    overlay: {
      warnings: true,
      errors: true
    }
  },
  publicPath: "./"
};

CSS

button.close {
    background: url(/src/style/images/close.png);
    font-size: 0px;
    border: 0px;
    width: 20px;
    height: 20px;

    &.modal {
      position: absolute;
      top: 2px;
      left: -38px;
      box-shadow: none;
    }
  }

Project directory structure

https://i.sstatic.net/cgboN.png

javascriptvue.jswebpackfrontendvue-cli

Answer №1

Your URL must be enclosed in double quotes and cannot be a relative or webpack URL.

If you wish to use a relative URL, it should look like this: 

url("../style/images/close.png");

If you prefer to use webpack, you can make the necessary configuration changes in vue.config.js:

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set("@", resolve("src"))
  }
}

In your CSS file, you can specify the background URL like so:

background: url("@/style/images/close.png");

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

Secure user verification using session variable in the Express framework with NodeJs

Is it safe to use session variables for login persistence in the backend? What are the security implications and alternatives to consider? Technology Stack: Express (NodeJs) on the backend, MaterialUI (React) on the frontend I am seeking a straightforwa ...

javascriptnode.jsexpresssecurityauthentication

How can you retrieve command line variables within your code by utilizing npm script in webpack?

I'm trying to access command line parameters from an npm script in my "constants.js" file. While I have been able to access parameters in the webpack.config.js file using process.env, it seems to be undefined in my app source files. The scenario con ...

javascriptnpmwebpack

Creating a dynamic MPTT structure with expand/collapse functionality in a Django template

I am looking for a way to display my MPTT model as a tree with dropdown capability (open/close nodes with children) and buttons that can expand/collapse all nodes in the tree with just one click. I have searched for examples, but the best I could find is ...

pythoncssdjangovue.jsdjango-templates

Troubleshooting: jQuery's append function does not seem to be functioning properly when trying

I am attempting to include a stylesheet in the head section of my page, but it seems that using 'append' is not getting the job done. Is there an alternative approach I should consider? Here is the code snippet: $('head').append(&apos ...

javascriptjqueryappend

The ExtJS Grid Filter is being triggered excessively

I am working on an ExtJS 6.2 grid that uses the 'classic' API. Although I am not very experienced with Ext, we have a grid component that we reuse with small modifications in different applications. In one of our apps, we have a text field for fi ...

javascriptextjs

Is JSON Compatible with the Switch Statement?

Could someone help me with creating a switch statement in JSON? {"Errors":{"key1":"afkafk"},"IsValid":false,"SuccessMessage":""} I attempted to use: switch(response) { case response.Errors.key1: alert('test'); default: } However, t ...

javascriptjqueryjson

What could be causing my button to not capture the value of this input text field?

After clicking the button, I am trying to log the value of the input text field in the console. However, it just shows up as blank. Despite checking my code multiple times, I can't seem to figure out why. Any insights would be greatly appreciated! &l ...

javascriptjquery

adding <script> elements directly before </body> tag produces unexpected results

While following a tutorial, the instructor recommended adding <script> tags right before the </body> to enhance user experience. This way, the script will run after the entire page content is loaded. After implementing the code block as sugges ...

javascripthtmldom

Mobile issue: unable to scroll to the top of the page

Despite my efforts in searching and attempting various solutions from SO, I have still been unsuccessful. I have explored options like the iscroll library and setting timeouts, but to no avail. My objective is to enable scrolling to the top of the window/ ...

javascriptjqueryios

Manipulate the <title> tag using jQuery or PHP

I have my own personal blog and I am trying to change the title tag dynamically when viewing different blog posts. My goal is to have the post title show up in the Twitter tweet button. I attempted the following methods: <script type="text/javascript"& ...

phpjavascriptjqueryhtml

The function this.$set is failing to update an array in VueJS

I am facing an issue where the console log shows me the updated array xyz, but when I try to print it in the DOM using {{xyz}}, it does not update. Can anyone shed some light on why this might be happening? data() { return { xyz: [] } }, met ...

javascriptarraysvue.jsvuejs2

Issue with Vuejs where changes are made to the parent array, but the child component does not detect those

I'm facing an issue where my parent component has the following code: {{ fencing }} <FencingTable v-if="fencing.length > 0" :fencing="fencing" :facility="facility" /> get fencing() { return this.$sto ...

javascriptvue.jsvue-componentvue-class-componentsvue-property-decorator

I am looking for information on how to properly handle HTTP errors in Axios when utilizing a blob responseType in VueJs

Using the blob responseType with Axios in my VueJS app allows me to download a document from the server. Everything works fine when the response code is 200, but problems arise when there's an HTTP error. I find it challenging to read the status code ...

jsonlaravelvue.jsaxiosblob

Excel-like JSON Data Grid using jQuery

I am in need of a data grid similar to an Excel sheet. My primary focus is on filtering capabilities only (refer to the image below). Can anyone offer assistance with this? ...

javascriptjqueryajaxjson

Is it a good idea to relocate the document.ready function into its own JavaScript function?

Can the following code be placed inside a separate JavaScript function within a jQuery document.ready, allowing it to be called like any other JavaScript function? <script type="text/javascript"> $(document).ready(function() { $('div#infoi ...

javascriptjquery

Having trouble retrieving a value from a .JSON file (likely related to a path issue)

My React component is connected to an API that returns data: class Item extends Component { constructor(props) { super(props); this.state = { output: {} } } componentDidMount() { fetch('http://localhost:3005/products/157963') ...

javascriptjsonreactjs

Utilizing PHP and JQuery Variables within the CodeIgniter Framework

Can someone please provide guidance on the best approach to handle this particular situation? I currently have a sidebar populated with Li Elements using a foreach loop, which is working perfectly. Each element contains a link that, when clicked, trigger ...

javascriptphpjqueryhtmlcodeigniter

Tips for developing a function that can identify the position of the largest integer within a given array

I need some help refining my function that is designed to identify the index of the largest number in an array. Unfortunately, my current implementation breaks when it encounters negative numbers within the array. Here's the code snippet I've bee ...

javascriptarraysfunction

The output.library.type variable in WebPack is not defined

Currently, I am delving into WebPack with a shortcode. As part of my learning process, I am working on a code snippet that involves calculating the cube and square of a number, which are then supposed to be stored in a variable outlined in the webpack.conf ...

javascriptnode.jstypescriptwebpackwebpack-dev-server

Tips for adding additional rows or cells to a table with jQuery

Similar Questions: How to Add Table Rows with jQuery Adding Rows Dynamically using jQuery. I am currently working with a table that contains one row and five editable cells for user input. My goal is to implement an "Add Row" feature using jQuery ...

javascriptjqueryhtml