vue中如何拼接字符串

Question

src="'../assets/images/data-icon-'+(index+1)+'.jpg'" 如何拼接？上面的写法最后的链接是对的，可是加载不到图片

Answer 1

Vue.js中的图片引用路径的方式:

第一种：按照正常HTML语法引用路径

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <router-view/>

  </div>

</template>

<script>

export default {

  name: 'App',

  data () {

    return {}

  }

}

</script>

第二种：使用import方式

<template>

  <div id="app">

    <img :src="logoSrc">

    <router-view/>

  </div>

</template>

<script>

import logoSrc from './assets/logo.png'

export default {

  name: 'App',

  data () {

    return {

      logoSrc: logoSrc

    }

  }

}

</script>

第三种：使用require方式

<template>

  <div id="app">

    <img :src='require("./assets/logo.png")'>

    <router-view/>

  </div>

</template>

<script>

export default {

  name: 'App',

  data () {

    return {}

  }

}

</script>

返回到您的问题，也直接给您做了一个demo：

<template>

  <div id="app">

    <ul>

      <li v-for="(item, index) in arr" :key="index">

         <!--这个地方用了ES6的模板字符串，模板字符串是增强版的字符串，用反引号（`）标识-->

        <img :src="require(`./assets/logo${index}.jpeg`)" alt=""> 

        <p>{{item.text}}</p>

      </li>

    </ul>

    <router-view/>

  </div>

</template>

<script>

export default {

  name: 'App',

  data () {

    return {

      arr: [{

        text: '111'

      }, {

        text: '222'

      }, {

        text: '333'

      }]

    }

  }

}

</script>

效果如下：

Answer 2

拼接没问题，应该是这个地址不对，没有图片可以读取。可以看下相对路径是不是写错了

Answer 3

methods: {

    imgSrc: function(index){

        return '../assets/images/data-icon-'+(index+1)+'.jpg'

    }

}

<img :src="imgSrc(index)">