vue img src="" 的路径在data中不生效 实际上需要这样写

	< img src="../assets/images/banner2.png">
	可以生效
	放在data里面不生效,比如这样写
	// banner图
  bannerList:[{
    image:"./assets/images/banner1.png"
  },{
    image:"../assets/images/banner2.png"
  },]

实际上需要这样处理

	  方法一.直接将你的图片源文件放在项目目录的static文件夹里,然后和正常写图片路径那样写就可以了:

在这里插入图片描述
在这里插入图片描述
方法二.通过import的方法将图片源路径引入,如下图所示:
在这里插入图片描述
在这里插入图片描述

		  需要注意的是:在Vue里图片是通过v-bind绑定src属性的,所以template模板上的img标签并不是src="",而是v-bind:src=""或简写为:src="",如果这里写错了,那无论如何都无法正常引入图片。

    方法三.采用背景图做法,通过data将图片源路径引入,利用内联样式。如下代码所示:
    <div :style="imgStyle"></div>
    data () {
         imgStyle: {
              backgroundImage:`url(${require('@/assets/images/xxx.png')})`
         }
    }

    如此也可将图片正常引入项目中并作为背景图使用。
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值