vue 动态设置静态资源图片的三种方式

问题：

Vue项目中，不能直接使用动态的图片资源路径。

解决方法：

• 方法一： 将图片放到public目录下后，直接引用

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

• 方法二： require方式引用

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

• 方法三： import方式引用

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

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