图片引入不显示问题

图片放在 assets目录下 和static 目录下

• 固定的引入(不使用v-bind)

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

• 把图片放static 目录,直接通过data引入

// template
<img v-bind:src=imgSrc>
// srcipt
export default {
  data () {
    return {
      imgSrc: '../static/launch.png'
    };
  }
};

或者不通过data，直接在html中引入

//template
<ul class="index-board-list">
        <li class="board-item" v-for="(item,index) in boardList" :class="[{'line-last':index % 2 != 0},'index-board-' + item.id]">
          <img :src="'../../static/images/'+(index+1)+'.png'">
          <p>{{index}}</p>
          <div class="board-item-right">
            <p>{{ item.title }}</p>
            <p>{{ item.description }}</p>
            <button class="buy_now">立即购买</button>
          </div>
        </li>
      </ul>
//script
export default {
  data() {
    return {
      boardList: [
        {
          title: "开放产品",
          description: "开放产品是一款开放产品",
          id: "car",
          toKey: "analysis",
          saleout: false,
          // src: "../../static/images/1.png"
        },
        {
          title: "品牌营销",
          description: "品牌营销帮助你的产品更好地找到定位",
          id: "earth",
          toKey: "count",
          saleout: false,
          // src: "../../static/images/2.png"
        },
        {
          title: "使命必达",
          description: "使命必达快速迭代永远保持最前端的速度",
          id: "loud",
          toKey: "forecast",
          saleout: true,
          // src: "../../static/images/3.png"
        },
        {
          title: "勇攀高峰",
          description: "帮你勇闯高峰，到达事业的顶峰",
          id: "hill",
          toKey: "publish",
          saleout: false,
          // src: "../../static/images/4.png"
        }
      ]
    }
  }
};

• 如果放在其它目录(如assets目录),直接通过data引入,则需要如下引入

require('../assets/launch.png') 或者 import logo from '../assets/logo.png'

如：

// template
<img v-bind:src=imgSrc>
// srcipt
export default {
  data () {
    return {
      imgSrc: require('../assets/launch.png')
    };
  }
};

import logo from '../assets/logo.png
// template
<img v-bind:src=imgSrc>
// srcipt
export default {
  data () {
    return {
      imgSrc: logo
    };
  }
};

转载于:https://www.jianshu.com/p/bca4d73a3d04