vue img src=＂＂ 的路径在data中不生效 实际上需要这样写
< img src="https://www.it610.com/assets/images/banner2.png">
可以生效
放在data里面不生效，比如这样写
// banner图
bannerList:[{
image:"./assets/images/banner1.png"
},{
image:"../assets/images/banner2.png"
},]
【vue img src="" 的路径在data中不生效 实际上需要这样写】实际上需要这样处理
方法一.直接将你的图片源文件放在项目目录的static文件夹里，然后和正常写图片路径那样写就可以了：
文章图片
文章图片
方法二.通过import的方法将图片源路径引入，如下图所示：
文章图片
文章图片
需要注意的是：在Vue里图片是通过v-bind绑定src属性的，所以template模板上的img标签并不是src=""，而是v-bind:src=""或简写为:src=""，如果这里写错了，那无论如何都无法正常引入图片。方法三.采用背景图做法，通过data将图片源路径引入，利用内联样式。如下代码所示：data () {
imgStyle: {
backgroundImage：`url(${require('@/assets/images/xxx.png')})`
}
}如此也可将图片正常引入项目中并作为背景图使用。
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- 如何在手机上查看测试vue-cli构建的项目