如题,我原先用的jquery判断高度,后替换图片
前方高能!!
我的目录结构是这样的(此处省略由于一开始把img放在与src同级的static带来的心酸泪史,各种图片打包路径问题,这坑好大!)
这时候我发现我用的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第一次看到这么写的。。。。