vue img video src动态设置

图片存放位置

前端

  <img  :src="url">
data中
  url:''
  created中
  created(){
    this.select()
  },
  method中：
   async select(){
      var {data:res}=await this.$axios.get('/select')
      this.url=require('@/'+res[0].video)
    }

接口：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200613141735704.png)
app.get("/select",function (req,res){

selectimg = sql.user.selecctimg;
const imgurl=selectimg(req,res)
console.log(imgurl)
})
const sql = require(‘./server.js’);导入数据库操作文件
server.js文件;

const DBHelper = require('./db.js');
var sqlMap = {
  user: {
  
  selecctimg: function (req,res){
    let sqlStr = 'select  * from video';
    let conn = new DBHelper().getConn();
    conn.query(sqlStr, (err, result) => {
      if (err) {
        console.log('cuowu')
      } else {
        res.json(result)
      }
    });
    conn.end();
  }
  }
}

module.exports = sqlMap;
db.js数据库连接文件

const mysql = require('mysql');

class DBHelper{
  // 获取数据库连接
  getConn(){
    let conn = mysql.createConnection({
      // 数据库连接配置
      host:'localhost',
      port:'3306',
      user:'root',
      password:'123456',
      database:'userlogin'  // 数据库名
    });
    conn.connect();
    return conn;
  }
}

module.exports = DBHelper;

其实最主要的是前端这段代码
this.url=require(‘@/’+res[0].video)
因为我的图片是放在src下面的所以图片需要用require导入并且，注意require中不可以直接放变量要使用变量前面必须加上明确的位置。。ok自己写的完全可以用呦。。