キーの問題が原因で発生し、VUE関連

プロジェクトを実行する前に、あなたは問題を抱えています。

ロードはアウト画像のキャッシュを持っていると同じであり、およびonloadイベントが、後に見つけたとき、それを交換しようとしています。ただ、時間のために、我々は通常、習慣、キー属性を追加しないプラス、しかし、あなたがカスタムコンポーネントを作成する場合は、変更をしませんVUE、それは更新されません、差分時間を行う、このプロパティを追加することを忘れます。しかし、実際には、それだけ遅くに更新されます。

2ヵ月後、私は会いました。私は、ウィジェットの互換性のアバターを作りました：

<template>
  <img 
    src="defalut_url"
    v-betterImage:[url]="url"
    alt="" />
</template>

<script>
let imageIsExist = function(url) {
  return new Promise((resolve) => {
    var img = new Image();
    img.onload = function () {
      if (this.complete == true){
        resolve(true);
        img = null;
      }
    }
    img.onerror = function () {
      resolve(false);
      img = null;
    }
    img.src = url;
  });
};
export default {
  props: ['url'],
  directives: {
    betterImage: {
      inserted: function(el, binding) {
        let imgURL = binding.value; // 获取图片地址
        if (imgURL) {
          imageIsExist(imgURL).then(exist => {
            if (exist)  el.setAttribute('src', imgURL);
          });
        }
      }
    }
  },
}
</script>

そこアセンブリへの参照は、すべてでは問題を使用しませんが、1つのページに、同時に異なるコンポーネントは、そのURLが変更、または表示されていない場合でも、過ごすために。私はそれが正常であるので、キーが存在するので、別のコンポーネントなしの問題で、重要な問題ではないと思うようになりました。私はしばらくの間、見たり、何の問題をデバッグします。私は、私が実際に解決されたキーを過ごした後、DEFAULT_URL同じ原因ではないだろう、と思う突然、キー原因を期待していませんでした。

<template>
  <img 
    src="default_url"
    :key="url"
    v-betterImage:[url]="url"
    alt="" />
</template>