Is there a way for me to insert a variable into the src attribute of my img tag like this: `<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>`

I need assistance with passing a variable called snAvatarSnuid within the img src tag, specifically after facebook.com/ and before /picture as shown below:

<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>

Note: 1) The https://graph.facebook.com/ & /picture sections of the src remain the same, only the value of snAvatarSnuid needs to be inserted in between. 2) The variable snAvatarSnuid is defined in the data of a Vue component

Can someone help me identify what I am doing wrong? How can I resolve this issue?

javascripthtmlvue.jsvuejs2web-frontend

Answer №1

To properly bind attributes, it is essential to use quotes in the correct manner:

<img alt="Avatar" :src="`https://graph.facebook.com/${snAvatarSnuid}/picture`">

By binding attributes, everything enclosed within the quotes will be interpreted as JavaScript.

Answer №2

To easily incorporate variables into your code, be sure to surround them with double brackets and use quotes for strings:

<img alt="Profile Picture" src='https://graph.facebook.com/{{userAvatarId}}/picture'>

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

Issue with passing parameter values in MVC Html.ActionLink

Currently, I am experimenting with MVC for a demonstration and have managed to put together some components. However, I am encountering difficulties with an Html.ActionLink. The goal is to display a series of dropdown lists to the user that must be selecte ...

javascriptjqueryasp.net-mvc

Exploring the world of technology with jQuery, harnessing the power of JSON objects

I'm seeking assistance with creating JSON using JQuery, sending it via Ajax to a .NET webservice, and then deserializing it in .NET in order to save the data to a database. If anyone could provide guidance on where I might be going wrong, that would ...

c#javascriptjsonweb-servicesjquery

Adjust the TextArea content according to the quantity of selections made in the listbox

If I have a listbox alongside a textarea: <textarea id="MyTextArea"></textarea> <select id="SelectList" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="me ...

javascriptjquerylistboxtextarea

When Components in Vue are called in a Single File, certain elements may not be displaying as expected

I have just finished creating my components using Vue 2, Vuetify, and Vue cli - 4.5.15. I attempted to combine them into a Single Vue file but encountered issues with the components not displaying <v-icons>, <v-textfield>, and some other elemen ...

htmlcssvue.jsvue-componentvuetify.js

React application experiencing issues with MQTT and Mosquitto broker connectivity

Upon installing the Mosquitto broker, I successfully tested it in my command prompt. However, when I attempted to establish a connection with my React application, I encountered the error message: "WebSocket connection to 'ws://localhost:1883/' f ...

javascriptreactjswebmqtt

Prop in a React component is undergoing mutation

I encountered a strange situation where a prop in a React component is being changed. Although it's technically not a mutation since it's an array in JavaScript, it should not be modified. To replicate the issue, I created a simple example: htt ...

javascriptreactjs

Leveraging environment variables in Nuxt's nuxt.config.ts

nuxt.config.ts: env: { cmsUrl: process.env.CMS_URL || 'http://localhost:1337' } In order to define the CMS_URL as a system variable in production/staging mode, I have set it up this way. However, in dev mode, it defaults to using localhost. ...

vue.jsnuxt.js

What is preventing npm sass from compiling properly?

https://i.stack.imgur.com/ekbNW.png While making edits to my code, I've noticed that the sass-compiler isn't indicating any errors (red lines) or successful compilations (green lines). Can someone help me identify where I might be going wrong? ...

htmlcssnpmsass

How can I customize the colors for light and dark mode in Quasar to reflect my own personal style?

I am working on a Quasar application using Quasar CLI and I'm looking to create custom colors that can be easily distinguished when switching between light and dark themes. Previously, I used Vuetify and could achieve this by simply editing my vuetify ...

vue.jsvuejs3vuetify.jsquasar-frameworkquasar

Repeatedly view the identical file on HTML

I'm currently working with the following HTML code: <input type="file" style="display: none" #file(change)="processImage($event)" /> <button type="button" class="btn" (click)="file.click()" Browse </button> When I select image1 fr ...

htmlangulartypescript

Tips for assigning a className to an element within a 'v-for' loop

This is the code snippet I am currently working with: <li v-for="(link, i) in shareLinks" :key="i" class='link box'> <div class=`icon ${link.name}`></div> </li> Is there a way to assign the class '${link.name}& ...

vue.jsnuxt.js

Struggling to locate the index of the matching object within an array of objects?

There is a dataset available: var data = { "variants": [{ "quantity": "20", "varientId": 8, "currency": "YEN", "extraField": { "Size": "1 ...

javascriptarraysjsonobjectequality-operator

react-basic-photo-carousel: adjust size and dimensions

As a newcomer to React JS, I decided to use react-simple-image-slider for my image slider component. However, I am facing an issue with making the images responsive on mobile devices. I tried setting the width and height using vw, vh or percentage units, ...

htmlcssreactjsimageslider

Choose a checkbox by targeting a specific column value with XPath

While automating the testing with Selenium, I encountered an issue related to selecting a checkbox in a table row. To resolve this problem, I turned to XPath for assistance. Specifically, I needed to choose the row based on the file name. Below is the rele ...

javahtmlseleniumxpathselenium-webdriver

What are the steps to create a responsive form using CSS?

I have a screenshot below that needs to be recreated using HTML/CSS. This design should be consistent in both desktop and mobile views. https://i.stack.imgur.com/cnfHt.png Currently, I have managed to replicate this in a JSFiddle which looks good on desk ...

htmlcssformsresponsive-design

Generating a file using buffer information in node.js

From the front-end client side, I am sending a file to the server. On the server-side, the data received looks something like this: { name: 'CV-FILIPECOSTA.pdf', data: <Buffer 25 50 44 46 2d 31 2e 35 0d 25 e2 e3 cf d3 0d 0a 31 20 30 20 6f 6 ...

javascriptnode.jsexpress

Troubleshooting code: JavaScript not functioning properly with CSS

I am attempting to create a vertical header using JavaScript, CSS, and HTML. However, I am facing an issue with the header height not dynamically adjusting. I believe there might be an error in how I am calling JSS. Code : <style> table, tr, td, t ...

javascripthtmlcss

Access various results from a jQuery function

Is there a way to efficiently extract the values of petKeys and employeeKey using the jQuery functions provided below? var whenSelectDateFromCalendar = function () { initKeyValues(); petKeys = ? employeeKey = ? }; var initKeyValues = function ...

javascriptjquery

Issue with importing a file using JQuery causing the click event to not function properly

I have a file named navigation.html located in a directory called IMPORTS <!-- Navigation --> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-ta ...

javascriptjqueryhtml

Issue with Slick Grid not updating after Ajax request

I need to update the data on a slick grid when a checkbox is clicked, using an ajax call to retrieve new data. However, I am facing issues where the slick grid does not refresh and the checkbox loses its state upon page load. Jsp: <c:if test="${info ...

javascriptjavajqueryajaxjsp