问答

vue滚动到一定高度更换图片问题

作者:admin 2021-10-10 我要评论

如题,我原先用的jquery判断高度,后替换图片 前方高能!! 我的目录结构是这样的(此处省略由于一开始把img放在与src同级的static带来的心酸泪史,各种图片打包...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

如题,我原先用的jquery判断高度,后替换图片
image.png
前方高能!!
我的目录结构是这样的(此处省略由于一开始把img放在与src同级的static带来的心酸泪史,各种图片打包路径问题,这坑好大!)
image.png
这时候我发现我用的vue-cli npm run build 之后图片都被打包到assets,但是路径不一样了!!原先img->header->logo.png打包后直接成img->logo.ad7783.png,所以我上面的写法是无法找到图片的,我又把hash给去掉了(找了好久)。
终于成功了,但是,想要通过logo_status来判断更换图片[这样是不是就能用上图片hash了,猜测],可是并没有变化,是哪里写错了吗?
PS:有其他更好的方案亦可,前提我想知道我这样写错在哪~

header.vue

<img :src="this.logo_status==0?logo_src:logo1_src" alt="LOGO" />
 
 data() {
    return {
      logo_status:0,
      logo_src: this.$store.state.logo_src,
      logo1_src:this.$store.state.logo1_src,
   }
 },
 methods: {
 changeLogo(){
 let haschange = false;
    $(window).scroll(function () {
        ?var?top?=?parseInt($pele.height())?*?0.3;
????????var?scrollTop?=?parseInt($(window).scrollTop());
????????if?(scrollTop?>?top)?{
????????????if?(!haschange)?{
????????????????$ele.addClass(style);
// ????????????????$img.attr('src',?'./assets/img/LOGO1.png');
// ????????????????$img.attr('src',?this.$store.state.logo1_src);
                this.logo_status =1;

????????????????$a.css('color',?'#414458').last().css('color',?'?#fff');
????????????????$('.drop-menu?li?a').css('color',?'#ffffff');
????????????????haschange?=?true;
????????????}
????????}?else?{
????????????if?(haschange)?{
????????????????$ele.removeClass(style);
// ????????????????$img.attr('src',?'./assets/img/LOGO.png');
// ????????????????$img.attr('src',?this.$store.state.logo_src);
                this.logo_status =0;
????????????????$a.css('color',?'#fff');
????????????????haschange?=?false
????????????}
????????}
    })
  }
}

store

const state = {
  logo_src:require('../assets/img/header/LOGO.png'),
  logo1_src:require('../assets/img/header/LOGO1.png')
}
###

那个,少侠,你可以看一下打包后的dist目录。是不会存在assets文件夹的,因为这个文件夹中的资源在打包过程中被分发到了js/css/img等文件夹中,然后你动态设置img的src,这时候已经到了浏览器端,webpack已经管不了了,img的src真真切切被设置为了./assets/xxx,然而打包后并没有这个文件夹,所以找不到啦。

解决办法:
1.使用require

$img.attr('src',?require('./assets/img/LOGO1.png'));

动态设置为了一个模块,require可以正确找到这个图片。

2.放到public文件夹下
打包后public里的资源会复制到dist,动态设置绝对路径后,还是能根据绝对路径找到这个地址。

###

粗略的看了下代码,直接使用require('../assets/img/header/LOGO.png')或者cdn地址,还有methods第一次看到这么写的。。。。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue滚动到一定高度更换图片问题

    vue滚动到一定高度更换图片问题

  • Kotlin现在在国内用多吗?

    Kotlin现在在国内用多吗?

  • RBAC 权限设计

    RBAC 权限设计

  • 将karma与mocha两种框架进行对比是否具

    将karma与mocha两种框架进行对比是否具

腾讯云代理商
海外云服务器