CODEWITHSUNDEEP
vue.jsvuejs2vue-component
samuel toh
samuel toh

Reputation: 7086

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?

Upvotes: 141

Views: 74212

Answers (7)

Mikael Tenshio
Mikael Tenshio

Reputation: 150

If none of the previous answers work, do this specially in Vue-3 and Composition API:

:src="require(`../image/animal_image/${image}`)"

Upvotes: 1

Sina Abedi
Sina Abedi

Reputation: 2401

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>

Upvotes: 1

Joan Galm&#233;s Riera
Joan Galm&#233;s Riera

Reputation: 593

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

Upvotes: 0

Happyriri
Happyriri

Reputation: 4443

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}`"

Upvotes: 254

Jason
Jason

Reputation: 933

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>

Upvotes: 6

Mahedi Hasan
Mahedi Hasan

Reputation: 1078

Just use

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

Upvotes: 7

Sibashrit Pattnaik
Sibashrit Pattnaik

Reputation: 325

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

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

Upvotes: 7

Related Questions