Setting a background image as a variable in Vue.js

I am currently working on a vue.js component that includes a div.icon:

Vue.component('obj', {
  props: ['img', 'name'],
  template: '<div><div class="icon"></div> {{ name }}</div>'
})

While it is simple to use {{ name }}, I am struggling with how to pass the {{ img }}.

I attempted to add the following code, but it was not successful:

v-bind:style="{ backgroundImage: 'url(' + {{ img }} + ')' }"

Can someone please guide me on how to utilize the prop img to set a background-image?

Answer №1

Implement the use of 'background-image' as suggested in this forum post:

v-bind:style="{ 'background-image': 'url(' + img + ')' }"

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

Steps to transfer the content of a label when the onclick event occurs

Seeking advice on how to send the dynamically varying value of a label upon clicking an anchor tag. Can anyone recommend the best approach to passing the label value to a JavaScript function when the anchor is clicked? Here is a sample code snippet: < ...

Toggle visibility of multiple DIVs with identical classes using radio buttons

I'm looking to streamline my use of radio buttons in HTML. How can I implement a single set of radio buttons at the top that will toggle the visibility of all DIVs with the same class on my webpage? <form> <input type="radio" name="csr_sel ...

Redirecting after executing JavaScript code

Is it possible to implement a redirect after the subscription script for push notifications has been executed successfully? <script> var OneSignal = window.OneSignal || []; OneSignal.push(function() { OneSignal.init({ ...

How to transfer data from PHP to JavaScript using Ajax in the webpage_BODY

I am extracting data from my Controller and passing it to a Javascript file via the Ajax success function. This data is then utilized to create charts. Here is an example of my controller logic: $result =array( "PourcentageCommande" => $Pourcen ...

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?

Can the <v-toolbar-title> be fixed within a <v-navigation-drawer>? <v-card class="d-inline-block elevation-12"> <v-navigation-drawer hide-overlay permanent stateless height="440" value="true"> <v-toolbar color="whi ...

Tips for displaying the sum of a grouped field in the balloonText using Amchart

I recently started working with Amcharts and I am seeking advice on what I may be doing incorrectly. Below is the snippet of my JavaScript code: var chartData1 = []; generateChartData(); function generateChartData() { var month = new Array( ...

Is there a way to use JavaScript to rearrange the order of my div elements?

If I have 4 divs with id="div1", "div2", and so on, is there a way to rearrange them to display as 2, 3, 1, 4 using Javascript? I am specifically looking for a solution using Javascript only, as I am a beginner and trying to learn more about it. Please p ...

What role does Vue.use() play when incorporating a plugin? If Vue.use() has already been implemented, is it necessary to also include it in the components?

I have been utilizing the vue-flag-icon plugin for displaying flags, found at https://www.npmjs.com/package/vue-flag-icon. In their documentation, I came across the following steps for initialization. import FlagIcon from 'vue-flag-icon' Vue.use( ...

What are the steps to implement email validation, Saudi mobile number validation, and national ID validation in cshtml?

Looking to implement validations for the following fields: email, mobile number (must be 10 numbers and start with 05), and National ID (must be 10 numbers and start with 1 or 2) <input class="form-control" type="text" id="txt ...

How to prevent npm from being accessed through the command prompt

I recently began working on a ReactJs project. However, I am facing an issue where after starting npm in Command Prompt, I am unable to enter any text. Should I close the cmd window or is there a way to stop npm? You can now access your project at the fol ...

AngularJs Http Status Code Generator工場

I am diving into the world of AngularJs and have developed a basic factory using $http get to fetch a .json file containing various HTTP status code numbers as keys, paired with their respective messages. However, I keep encountering the following error: ...

Whenever I attempt to run the NPM install command in the Terminal, it seems to generate multiple errors

I am encountering an issue on my work laptop. I have the latest versions of Angular, Nodejs, Nodesass, and VScode installed in the local environment path. Whenever I download an Angular template from Github and try to do NPM Install, it consistently thro ...

Are there any JavaScript charting tools that can draw in a clockwise direction with multiple data points?

Can anyone recommend a JavaScript live chart/graph library that can create clockwise graphs with multiple points, similar to the example below? https://i.sstatic.net/dQfK4.png ...

Event triggered only upon initial click

I am experiencing an issue with my category list. When I click on a category to trigger an AJAX request for the first time, the request does not go through. However, when I click on the same category a second time, it works perfectly. Below is the code sni ...

A method using JQuery and Javascript to retrieve Highcharts data in JSON format, properly structured, by leveraging Selenium with C# programming

I am currently working on extracting the JSON equivalent of a highchart graph using Selenium and C# but have encountered a few obstacles along the way. To retrieve the JSON data for a specific highchart, follow these steps: Visit the URL Log in using th ...

The last value label in Google Charts bar chart getting cut off

I've searched extensively for a solution to this issue regarding the haxis labels, but I have not been able to find one that addresses it... In the image provided below, you'll observe that the last percentage label on the horizontal axis is mis ...

Adjusting the width of a select box to match the size of its child table using CSS

Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...

Troubleshooting GLSL scripts within a web-based WebGL environment

Are there ways to debug GLSL code or display variable values directly from within the GLSL code when using it with WebGL? Does three.js or scene.js offer any features for this purpose? ...

The animation of a cube rotating to a different face is not functioning properly when using three.js

Why is my cube not animating when rotating to another face with the code below? How can I resolve this issue? new Vue({ el: '#app', data () { return { camera: null, scene: null, renderer: null, mesh: null, ...

Tips for resolving TS7022 issue within Vue Composition API

I encountered an issue while attempting to import a component in my file that generated the following error message: TS7022: 'default' implicitly has type 'any' because it does not have a type annotation and is referenced directly or in ...