Vue使用asset文件夹中静态资源

一、为图片URL绑定变量

<template>
  <img :src='imgurl'>
</template>
复制代码

二、在JS中设置变量

• 直接将图片引入为模块

require imgurl from '../assets/test.png'
复制代码

• 将imgurl变量放在数据中

data(){
  return {
    imgurl : require('../assets/test.png')
  }
}
//或者保存为数组的形式
data(){
  return {
    test: [
      {
        imgurl: require('../assets/test.png'),id: '1'
      }  
    ]
  }
}
复制代码

• 在生命周期函数中设置变量值

data(){
  return {
    imgurl: ''
  }
}
created(){
  let urltemp = 'assets/test.png';
  this.imgurl = require('@/' + urltemp);
}
复制代码