vue中如何拼接字符串

hailey
  • 36

图片描述

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

图片描述

评论
阅读 7.5k
5 个回答
✓ 已被采纳

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>

效果如下:

clipboard.png

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

可以用require, :src="require('../assets/images/data-icon-'+(index+1)+'.jpg')"

网络中查下,看图片是不是404

methods: {
    imgSrc: function(index){
        return '../assets/images/data-icon-'+(index+1)+'.jpg'
    }
}
<img :src="imgSrc(index)">
宣传栏