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

Is the absolute positioned element on the left or right based on its current location?

Is there a way to assign absolute positioning with left at 0px or right at 0px depending on whether the positioned div will go outside of its container? For example, when you right click in a browser and see the menu appear to the right of where you click ...

javascriptjqueryhtmlcssabsolute

What methods can be used to disable a JavaScript function, such as utilizing hasClass()?

I am currently customizing a WordPress theme to load posts and pages using AJAX. I have successfully implemented this functionality with the code snippet below, but now I need to prevent the AJAX function from running when clicking on the logo that links t ...

javascriptajaxwordpress

I need assistance with an issue on my Google Dev Console, as it keeps showing an error stating that ".getcontext is

Looking for some assistance here as my development console keeps displaying an error: Uncaught TypeError: canvas.getContext is not a function. Here is the problematic code snippet: `var canvas = document.createElement; var c = canvas.getContext("2d&qu ...

javascriptcanvas

"Learn the process of setting a variable in ng-model within an input field based on a specific condition

I need to dynamically assign an ng-model variable based on a condition. For instance: <input type="text" ng-model="item.model[multilang]" > The $scope.multilang variable can be set to either "ENG", "JP" (languages) or false. So, when multilang = "E ...

javascriptangularjs

What is the best way to conceal a menu that automatically scrolls to the content when it is clicked?

Below is a Codepen with a menu that isn't behaving as expected. var menu = document.querySelector('.nav__list'); var burger = document.querySelector('.burger'); var doc = $(document); var l = $('.scrolly'); var panel = $ ...

javascriptjquerycss

What is the optimal parameter order when utilizing pre-curried functions and composition in JavaScript?

We have a simple, mathematically curried function for subtracting numbers: function sub(x) { return function (y) { return x - y; }; }; sub(3)(2); // 1 The function signature matches the obtained result. However, when function composition comes i ...

javascriptparametersfunctional-programmingcompositioncurrying

Client component in Next.js is automatically updated upon successful login

I am currently working on a Next.js + DRF website that requires authentication. I have set up my navbar to display either a "log in" or "log out" button based on a boolean prop passed from the server side to the client-side: export default async function R ...

javascriptnext.js

What is the best way to update data by making API calls within store.js using Vuex?

I am in the process of integrating vuex into my project. I have familiarized myself with mutations and actions for updating state properties. My main inquiry is regarding the most secure and effective method to update state components by retrieving data fr ...

javascriptvue.jsvuejs2vuex

React Router Redux causing an infinite loop when navigating back

I recently encountered a strange issue with my React + Redux app. I am using React Router in combination with React Router Redux for routing, and I noticed some unexpected behavior. Clicking the back button once takes me from route 0 to -1 successfully. Ho ...

javascriptreactjsreact-routerreact-reduxreact-router-redux

Sending Node.js array from endpoint to Javascript function

I am facing an issue with my HTML chart that is supposed to display an array from a JavaScript function called 'window.testDataArray'. Instead of using a sample array, I want to fetch the array data from a server endpoint. However, I am unsure ab ...

javascriptarraysnode.jsendpoint

javascript a loop through an array to reassign element ID's

Formulating a form with input elements that are utilizing a jquery datepicker is the current task at hand. Take a look at a snippet of the HTML code for these inputs: <td style="width:15%"><input type="text" name="datepicker" id="Tb3fromRow10"/&g ...

javascriptarraysloopsdatepicker

Observing mutations in HTML templates with MutationObserver

It appears that the MutationObserver does not function properly with a <template> tag. Check out this JSFiddle for more information! Any suggestions on how to effectively monitor changes in a <template> element? ...

javascriptmutation-observers

The layout of my website appears distorted on mobile devices

When I view my website, http://www.healthot.com, on an iPhone or other mobile device, the page doesn't display correctly. It scales the window, requiring me to zoom out to see the entire page. To better understand the issue, please refer to this photo ...

javascriptjqueryhtmlcssmobile

Utilize the fetch function to showcase information retrieved from a specific endpoint on a webpage using Javascript

Hey there, I have a Node server with an http://localhost:3000/community endpoint. When I make a GET request to this endpoint, it returns information about three different users in the form of JSON objects. [ { "avatar": "http://localhost:3000/avatars ...

javascripthtmldomfetch

Issues encountered - nodejs-lts (exit code 1603) - Problem occurred during execution of 'C:ProgramDatachocolateylib odejs-lts oolschocolateyinstall.ps1' script

Encountering Issues with Installing 64-bit Version of nodejs-lts... Received a Generic MSI Error during installation, indicating a local environment issue rather than a problem with the package or MSI file itself. Possible reasons for thi ...

javascriptnode.js

Tips for implementing Javascript form validation

While working on a Django form, I encountered an issue with implementing javascript logic. My goal is to submit the form if the input field is not empty. However, I am struggling to determine how to identify the id of {{form.value}}. <form id = " ...

javascriptjquerydjangoforms

What steps can be taken to successfully import a JavaScript module without encountering a ReferenceError?

Recently, I created a Javascript export file with the following content: export const A = 1; export const B = 2; export const C = 3; As an experiment, I attempted to import this file into another Javascript document like so: import 'path/export_file. ...

javascriptnode.jsimportexportnode-modules

Creating a custom regex script in Javascript to properly parse Google Sheets data that contains commas

Currently, I am working with a JavaScript script that extracts data from a public Google Sheets feed in a JSON-CSV format that requires parsing. The rows are separated by commas, but the challenge lies in dealing with unescaped commas within each item. Fo ...

javascriptjsonregexcsvgoogle-sheets

The Express application remains silent unless a port is specified for it to

Having recently started working with Node, I encountered an issue with Express. My application is only listening to localhost:PORT and I want it to also listen to just localhost. Here is the code snippet: ** var app = require('../app'); var debu ...

javascriptnode.jsexpress

Struggling to access FormData in php

I'm having trouble retrieving variables from FormData in PHP after making an AJAX call. What could be causing this issue? Here is the snippet of my JavaScript code: var sendData = new FormData(); sendData.append('itemid',$('select#sel ...

javascriptphpjqueryajaxform-data