Vue.js动态图片src响应性问题深度解析与解决方案

<template>
  <div>
    @@##@@
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicImageUrl: 'http://example.com/image.jpg',
      refreshTimestamp: Date.now() // 初始化时间戳
    };
  },
  methods: {
    // 当图片内容更新时，调用此方法来更新时间戳
    // 假设在某个异步操作（如API调用）完成后更新图片内容
    updateImageContent() {
      // ... 假设这里是获取新图片内容的逻辑 ...
      this.refreshTimestamp = Date.now(); // 更新时间戳以强制浏览器重新加载
    }
  },
  mounted() {
    // 示例：每隔一段时间模拟图片内容更新
    setInterval(() => {
      this.updateImageContent();
    }, 60000); // 每分钟更新一次
  }
};
</script>

<template>
    <div class="mainDisplay">
      <!-- 根据 computedSchedule 显示不同的图片容器 -->
      <div class="imgContainer" v-if="computedSchedule === 's1'">
        @@##@@
      </div>
      <div class="imgContainer" v-else-if="computedSchedule === 's2'">
        @@##@@
      </div>
      <div class="imgContainer" v-else> <!-- 默认或 s3 -->
        @@##@@
      </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      // 存储从XML加载的图片路径
      morningSrc: "./public/morning.jpg",
      afternoonSrc: "./public/afternoon.jpg",
      eveningSrc: "./public/evening.jpg",

      // 存储当前小时，通过定时器更新，使其具备响应性
      currentHourValue: new Date().getHours(), 
      intervalId: null, // 用于存储定时器ID
    };
  },
  mounted() {
    // 1. 加载XML配置
    axios.get("/screen-schedule-config.xml")
      .then(response => {
        let domParser = new DOMParser();
        let xmlDocument = domParser.parseFromString(response.data, "text/xml");
        let imagePathElements = xmlDocument.getElementsByTagName("assets");

        if (imagePathElements.length > 0) {
          this.morningSrc = imagePathElements[0].querySelector("asset").getAttribute("path");
          this.afternoonSrc = imagePathElements[0].querySelectorAll("asset")[1].getAttribute("path");
          this.eveningSrc = imagePathElements[0].querySelectorAll("asset")[2].getAttribute("path");
        }
      })
      .catch(error => {
        console.error("加载XML配置失败:", error);
      });

    // 2. 设置定时器，每秒更新 currentHourValue
    this.intervalId = setInterval(() => {
      this.currentHourValue = new Date().getHours();
    }, 1000); // 每秒更新一次当前小时，确保计算属性能及时响应
  },
  beforeDestroy() {
    // 3. 在组件销毁前清除定时器
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
  computed: {
    // 计算当前的排班，依赖于响应式的 currentHourValue
    computedSchedule() {
      if (this.currentHourValue >= 0 && this.currentHourValue < 12) {
        return "s1"; // 早上
      } else if (this.currentHourValue >= 12 && this.currentHourValue < 19) {
        return "s2"; // 下午
      } else {
        return "s3"; // 晚上
      }
    },
    // 根据 computedSchedule 和图片路径，计算当前应显示的图片src
    currentImageSrc() {
      let src = "";
      switch (this.computedSchedule) {
        case "s1":
          src = this.morningSrc;
          break;
        case "s2":
          src = this.afternoonSrc;
          break;
        case "s3":
          src = this.eveningSrc;
          break;
        default:
          src = this.morningSrc; // 默认值
      }
      // 结合时间戳解决浏览器缓存问题，确保图片实时更新
      return `${src}?v=${Date.now()}`;
    }
  }
};
</script>