vue中动态引入静态图片

页面中不能直接将静态路径放入变量的方式引用。

 <img :src="url" />

 url=“../assets/images/banner_1.png”

方式一：使用import 引入

import imgPath from '../assets/images/banner_1.png'

export default {
  data() {
    return {
      url: imgPath
    }
  },
}

方式二：使用require引入

export default {
  data() {
    return {
      url: require(`../assets/images/banner_1.png`)
    }
  },
}

方式三：将图片放到public目录下后，直接引用

export default {
  data() {
    return {
      url: 'banner_1.png'
    }
  },
}