ReactJs 项目中 spinning record 旋转唱片图片无法显示问题求助

问题根源汇总 #

1. 资源引用路径错误
   React项目中图片资源分两种存放路径，对应不同的引用规则，混用会导致资源加载404
2. 样式配置异常
   元素被遮挡、透明度为0、宽高为0、动画偏移到视口外都会导致图片看不到
3. 资源本身存在问题
   文件名拼写错误、后缀不匹配、文件损坏都会导致加载失败
4. JSX语法错误
   未正确使用变量引用导入的图片，直接把变量名写为字符串会导致加载失败

修复步骤 #

• 调整资源引用方式
  如果你把唱片图片存放在src/assets目录下，先在VideoFooter.js顶部导入资源再引用：

  // 替换为你本地的实际文件路径和文件名
  import spinningRecord from './assets/record.png'
  // JSX中使用变量引用
  <img src={spinningRecord} alt="旋转唱片" className="spin-record" />
  

  如果你把唱片图片存放在public目录下，直接写根路径引用即可：

  <img src="/record.png" alt="旋转唱片" className="spin-record" />
  

• 校验样式规则
  确保图片元素和外层容器的样式配置正常，可参考以下基础配置：

  .spin-record {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    opacity: 1;
    z-index: 99;
    /* 旋转动画配置 */
    animation: rotate 3s linear infinite;
  }
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  

• 验证资源文件
  确认本地的图片文件名大小写、后缀名和代码中引用的完全一致，单独打开图片文件确认没有损坏。

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