2

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.org/img/w/04d.png'"/>

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

I've tried this:

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

I've tried a bunch of different combinations 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?

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

3 Answers 3

Reset to default
8

Use backticks to make it a JavaScript template string:

<img :src="`https://openweathermap.org/img/w/${iconCode}.png`"/>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This did the trick. Just had to add .png for the file extension. Thanks.
Great glad that worked. I added the ".png" to my answer in case anyone else sees this in the future.
2

Like so

<img :src="'https://openweathermap.org/img/w/'+ ${iconCode}"/>
Improve this answer

Comments

0

Hello try the following as a URL Parameter:

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.