JavaScript实现头像上传后保留25px圆角的问题如何解决

原因说明 #

上传新头像后圆角失效通常是两类问题：一是原有圆角样式仅匹配了默认头像的资源地址，没有绑定到固定类名；二是动态替换图片资源后，原有样式被更高优先级的规则覆盖。

解决方案 #

方案1：通过类名绑定固定CSS（推荐）

你当前的头像img标签一直携带pfp类，直接给这个类添加全局样式即可，替换src不会移除类名，样式会永久生效：

.pfp {
  border-radius: 25px;
  /* 额外补充规则，避免头像拉伸变形 */
  object-fit: cover;
  width: 你设置的头像实际宽度;
  height: 你设置的头像实际高度;
}

方案2：JS替换资源时强制添加行内样式

如果存在其他样式冲突，可在替换头像src的时候直接设置行内样式，优先级最高不会被覆盖，修改你的JS代码即可：

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#thePFP');
const file = document.querySelector('#file');

file.addEventListener('change', function(){
  const choosedFile = this.files[0];
  if (choosedFile) {
    const reader = new FileReader();
    reader.addEventListener('load', function(){
      img.setAttribute('src', reader.result);
      // 新增下该行强制设置圆角
      img.style.borderRadius = '25px';
    });
    reader.readAsDataURL(choosedFile);
  }
});

内容的提问来源于stack exchange，提问作者user17233869