How can I solve "Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"? Vue.js 2

My Vue.js component is like this:

    <template>
        <div>
            <div class="panel-group" v-for="item in list">
                ...
                <div class="panel-body">
                    <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
                        Show
                    </a>
                </div>
                <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
                ...
                </div>
            </div>
        </div>
    </template>

    <script>
        export default {
            ...
            computed: {
                list: function() {
                    return this.$store.state.transaction.list
                },
                ...
            }
        }
    </script>

When executed, there exists an error like this:

> Vue template syntax error: > > id="purchase-{{ item.id }}": Interpolation inside attributes has > been removed. Use v-bind or the colon shorthand instead.

How can I solve it?

Use JavaScript code inside v-bind (or shortcut ":"):

:href="'#purchase-' + item.id"

and

:id="'purchase-' + item.id"

Or if using ES6 or later:

:id="`purchase-${item.id}`"

If you're pulling data from an array of objects, you need to include require('assets/path/image.jpeg') in your object like I did below.

Working example:

people: [
  {
    name: "Name",
    description: "Your Description.",
    closeup: require("../assets/something/absolute-black/image.jpeg"),
  },

Using require(objectName.propName.urlPath) in the v-img element did not work for me.

<v-img :src="require(people.closeup.urlPath)"></v-img>

Use v-bind or shortcut syntax ':' to bind the attribute. Example:

<input v-bind:placeholder="title">
<input :placeholder="title">

Just use

:src="`img/profile/${item.photo}`"

The easiest way is too require the file address:

<img v-bind:src="require('../image-address/' + image_name)" />

The complete example below shows ../assets/logo.png:

<template>
    <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
  export default {
    name: "component_name",
    data: function() {
      return {
        img: "logo.png"
      };
    }
  };
</script>

The most elegant solution is save images outside Webpack. By default, Webpack compress images in Base64, so if you save images in your assets folder, that doesn't work because Webpack will compress images in base64, and that isn’t a reactive variable.

To solve your problem, you need to save your images in your public path. Usually the public path is in "public" folder or "statics".

Finally, you can do this:

data(){
  return {
    image: 1,
    publicPath: process.env.BASE_URL
  }
}

And your HTML you can do this:

<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">

When to use the public folder

• You need a file with a specific name in the build output
• File depends on a reactive variable that can change in execution time
• You have images and need to dynamically reference their paths
• Some library may be incompatible with Webpack and you have no other option but to include it as a <script> tag.

More information: "HTML and Static Assets" in Vue.js documentation