Framework7中mounted钩子执行JS修改图片src无效的解决求助

先排查几个核心问题，再给出针对性解决方案：

一、先确认两个基础问题 #

1. 函数是否被调用：检查mounted()钩子中有没有执行this.setStars()，很多时候是函数定义了但没触发执行。
2. 图片路径是否正确：JS里的相对路径是相对于当前页面的HTML文件，而非JS文件位置。可以打开浏览器控制台的「网络」标签，看星星图片的请求是否返回404——如果是，调整路径（比如改成根目录开头的绝对路径/assets/full_star.svg测试）。

二、针对性解决方案 #

方案1：修复原生DOM操作逻辑 #

优化代码，加入评分参数支持，同时确保元素存在再操作：

setStars(rating = 5) {
  const fullStar = '../assets/full_star.svg';
  const emptyStar = '../assets/empty_star.png';
  
  // 循环遍历星星，避免重复代码
  for (let i = 1; i <= 5; i++) {
    const starEl = document.getElementById(`star_${i}`);
    if (starEl) {
      starEl.src = i <= rating ? fullStar : emptyStar;
    }
  }
}

// 在mounted中调用函数，传入评分
mounted() {
  this.setStars(3); // 示例：设置3星
}

方案2：用数据绑定实现（Framework7-Vue推荐） #

如果使用的是Framework7-Vue，推荐用MVVM数据绑定替代原生DOM操作，更可靠也更易维护：

HTML部分

<div>
  <span><img :src="getStarSrc(1)" class="star"></span>
  <span><img :src="getStarSrc(2)" class="star"></span>
  <span><img :src="getStarSrc(3)" class="star"></span>
  <span><img :src="getStarSrc(4)" class="star"></span>
  <span><img :src="getStarSrc(5)" class="star"></span>
</div>

JS部分

export default {
  data() {
    return {
      rating: 3, // 这里存储评分值，可从接口动态赋值
      emptyStar: '../assets/empty_star.png',
      fullStar: '../assets/full_star.svg'
    };
  },
  methods: {
    getStarSrc(index) {
      return index <= this.rating ? this.fullStar : this.emptyStar;
    }
  },
  mounted() {
    // 如果评分来自接口，在这里请求数据并赋值：
    // this.rating = 接口返回的评分值
  }
};

三、调试技巧 #

打开浏览器控制台（F12）：

• 看「控制台」标签有没有null或undefined报错（说明元素没找到）
• 看「网络」标签有没有图片请求404（说明路径错误）

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