javascript - Vue.js: Concatenate variable into image URL - Stack Overflow

admin管理员组

文章数量:1301534

I'm brand new to Vue.js and trying to create an image who's src file path contains a variable. I am having a hard time concatenating in Vue.js.

I have an image like this:

<img :src="'.png'"/>

I want to concatenate the '04d.png' part so that it is dynamic and shows whatever image ing back from the API call. How do I add a variable onto the url?

I've tried this:

<img :src="'/+${iconCode}'"/>

I've tried a bunch of different binations of single quotes, double quotes, backticks, etc... and nothing works. What is the proper way to concatenate a variable onto a string url in an image tag in Vue?

I'm brand new to Vue.js and trying to create an image who's src file path contains a variable. I am having a hard time concatenating in Vue.js.

I have an image like this:

<img :src="'https://openweathermap/img/w/04d.png'"/>

I want to concatenate the '04d.png' part so that it is dynamic and shows whatever image ing back from the API call. How do I add a variable onto the url?

I've tried this:

<img :src="'https://openweathermap/img/w/+${iconCode}'"/>

I've tried a bunch of different binations of single quotes, double quotes, backticks, etc... and nothing works. What is the proper way to concatenate a variable onto a string url in an image tag in Vue?

• javascript
• html
• image
• vue.js
• concatenation

Share Follow asked Sep 23, 2019 at 20:53 Nick KinlenNick Kinlen 1,40455 gold badges3434 silver badges6262 bronze badges 1

• 1 I think you don need a '+' sign it should work without it – Loki Commented Sep 23, 2019 at 21:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Use backticks to make it a JavaScript template string:

<img :src="`https://openweathermap/img/w/${iconCode}.png`"/>

Like so

<img :src="'https://openweathermap/img/w/'+ ${iconCode}"/>

Hello try the following as a URL Parameter:

"'https://openweathermap/img/w?paramName=${iconCode}'"

本文标签： javascriptVuejs Concatenate variable into image URLStack Overflow