What is the best way to link the :style attribute with object syntax and incorporate multiple background images?

I'm experiencing an issue trying to bind CSS style with the object syntax to an image. The style object includes the CSS property background which refers to multiple background images, but unfortunately, these images are not showing up.

Template

<v-img
    :src="require('../assets/background/bg_0.png')"
    :style="bg"
></v-img>

Script

data() {
    return {
        bg: {
            background: "url('~@/assets/pieces/animals/animal_1.png') no-repeat center, url('~@/assets/pieces/animals/animal_3.png') no-repeat center",
            width: "300px",
            height: "300px"
    }
}
}

The properties for width and height are working fine, but the two images specified in the background property are not being displayed. What could be going wrong here?

Appreciate any assistance you can provide!

javascriptvue.jsvuejs2vuetify.js

Answer №1

Your CSS background code is accurate, but the issue might lie in the image path you are using. The prefix ~@ won't function properly because the image has not been required, causing Webkit to be unaware of it. I would suggest requiring the image first and then passing it as a constant to the bg object. This approach will help organize your code by spreading it across multiple lines while still enabling you to utilize your preferred path prefix for dynamic URLs.

You can implement something similar to the following:


const animal2 = require('~@/assets/pieces/animals/animal_2.png');
const animal4 = require('~@/assets/pieces/animals/animal_4.png');

data() {
    return {
        bg: {
            background: `url(${animal2}) no-repeat center, url(${animal4}) no-repeat center`,
            width: "300px",
            height: "300px"
        }
    }
}

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

Bootstrap modal fails to appear on screen

Using PHP, I generate a link from the controller. The link is stored in $retailer["url"] as 0125myimage.jpg <a onClick="crop('.$retailer["url"].')" data-target="#styledModal3" href="#" class="fa fa-edit lupa"></a> Here is my JavaSc ...

javascriptjqueryajaxtwitter-bootstrap

Encountering a connection error while running a Node.js Selenium test case on Chrome. The specific error message received is: "Error: ECONNREFUSED - Connection refused to 127.0

When attempting to run a test case on a Selenium Node.js server, an error was encountered: Error: ECONNREFUSED connect ECONNREFUSED. The test case script is as follows: var assert = require('assert'), test = require('selenium-webdriver ...

javascriptnode.jsseleniumselenium-webdriverselenium-chromedriver

Skipping the configuration file during the process of converting Node.js files to an executable using pkg

I am currently working on a node.js application and in order to prevent users from reading the code, I am attempting to convert my JavaScript files to executable files. I have been using the pkg module for this task, but I have encountered an issue. The p ...

javascriptnode.jsexe

Struggling to prevent keyboard-triggered date changes in the MUI DatePicker API

Link to CodePen: codepen.io/s/jk3sgj?file=/demo.tsx Is there a way to prevent users from manually typing in dates and force them to select a date from a modal picker instead? I tried using the ReadOnly prop, but it disabled the entire input field, includ ...

javascriptreactjsmaterial-uicalendar

Retrieving the date from the final item in a JSON object using AngularJS

In my web application built with AngularJS, I am dynamically creating objects. The goal is to allow users to load new events by clicking a button. To achieve this functionality, I need to determine the date of the last event loaded so that I can fetch the ...

javascriptjsonangularjs

Disable onclick action for programmatically created buttons

I'm facing an issue with the code I'm using to delete messages on my website. The problem is that while newly added messages are being dynamically loaded, the delete button (which links to a message deletion function) does not seem to be working. ...

javascriptjqueryhtmlajax

Storing a jquery ajax response for faster retrieval in javascript/browser

Is there a way to implement caching for ajax responses in JavaScript or the browser? According to the jquery.ajax documentation: The default behavior is that requests are always issued, but the browser may serve results from its cache. To prevent the ...

javascriptjqueryajaxcachingbrowser

Distance between cursor and the conclusion of the text (autofocus)

I discovered a method to automatically position the cursor at the end of a string using autofocus: <input name="adtitle" type="text" id="adtitle" value="Some value" autofocus="" onfocus="this.setSelectionRange(this.value.length,this.value.length);"> ...

javascripthtmlautofocus

Establish a buffering system for the <video> element

Currently, I am facing an issue with playing videos from a remote server as they take an extended amount of time to start. It appears that the entire video must be downloaded before playback begins. Is there a way to configure the videos so they can begi ...

javascripthtmlvideowebhtml5-video

Achievement with ajax: If the status code is 200, execute one function; otherwise, execute a

I can't figure out why this isn't working... I'm using $.ajax to run file.php and pass a POST value from an input field. Even though the file.php is functioning properly (it successfully adds a user to my newsletter), my ajax function seems ...

javascriptjqueryajax

The React snackbar is mysteriously peeking out from behind the popup

While using the react-notifications-component snack bar, I encountered an issue where my snack bar was appearing behind the pop-up. Is there a way to fix this with z-index? I tried using <ReactNotification style={{ zIndex: 10000 }}/>, but it didn&ap ...

javascriptreactjsecmascript-6material-uifrontend

All Pages Except Index in Vue Website Report "404 Error: /path Not Found"

Using Vue with Node.js to host my website on an AWS EC2 instance. I don't have a main index node.js file, just the vue-router file. Utilizing AWS CloudFront to secure my certificate and traffic. The issue arises when accessing the site through the ser ...

node.jsvue.jsamazon-ec2amazon-cloudfrontvue-router

Angular 2, React, or any other modern framework.getList()?.map

I have experience working on multiple angular 1 projects and I absolutely enjoyed it. We have several upcoming projects where I need to recommend JavaScript frontend libraries/frameworks. With the decline of angular 1 and mixed reviews about angular 2&apos ...

javascriptangularjsangularreactjsvue.js

How to retrieve a grandchild's property in VUE.js

When working with Vue, I am trying to figure out how to access the 'someProperty' of componentC. This component is a child of componentB, which in turn is a child of componentA, all within the same grandfather componentA. I have attempted the fo ...

vue.js

Unnecessary PHP code will run on its own in JavaScript

Attempting to initiate a session in PHP and assign a value to a session variable within a Javascript function on a PHP/HTML page is creating an issue. The problem arises when the PHP code inside the if statement runs automatically upon loading the page, ra ...

javascriptphphtml

What is the best way to organize data for creating line plots using vue/chart.js?

I am working on retrieving data from an API and using vue-chartjs to generate a line plot. But, I'm facing an issue where only the first two points are being plotted. It seems like my data structure might be incorrect, but I'm struggling to figu ...

vue.jschart.jsvue-chartjs

The algorithm for editing multiple phone numbers

I'm working on a form for my project that requires saving 4 phone numbers. The text boxes for entering the phone numbers are revealed on button clicks. Here's what I need to implement: When adding entries---> Enter the first phone number. Clic ...

javascriptreactjs

What is the right way to utilize Fetch in JavaScript and Django?

I am currently working on creating a METAR decoder similar to the one shown in this image: https://i.stack.imgur.com/P40uG.png For this project, I am implementing the use of the fetch function in Vanilla JavaScript. The goal is to send the inputted code t ...

javascriptpythondjangoajaxfetch

Encountering the issue of receiving an undefined value for a variable despite having previously defined it within

I’ve been working on implementing the Google Maps distance matrix API with the google-distance-matrix library. Here’s the code snippet I’m using: app.get("/users", (req, res) => { // console.log(req.query); // res.send(req.query); ...

javascriptnode.jsgoogle-mapscallbacksynchronous

Angular 2: Enhancing Textareas with Emoji Insertion

I am looking to incorporate emojis into my text messages. <textarea class="msgarea" * [(ngModel)]="msg" name="message-to-send" id="message-to-send" placeholder="Type your message" rows="3"></textarea> After entering the text, I want the emoj ...

javascriptnode.jsangular