fix(image): async image.src (Tencent#2709)

* fix(image): async image.src * fix(image): watch immediate
KMethod · Aug 25, 2023 · 1e00231 · 1e00231
1 parent bf92226
commit 1e00231
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 8 deletions.
diff --git a/src/image/_example/extra-always.vue b/src/image/_example/extra-always.vue
@@ -2,11 +2,7 @@
   <t-space :size="32">
     <t-space direction="vertical">
       <strong :style="{ fontSize: '20px' }">有遮罩</strong>
-      <t-image
-        src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-        :style="{ width: '284px', height: '160px' }"
-        :overlayContent="renderMask"
-      />
+      <t-image :src="src" :style="{ width: '284px', height: '160px' }" :overlayContent="renderMask" />
     </t-space>
     <t-space direction="vertical">
       <strong :style="{ fontSize: '20px' }">无遮罩</strong>
@@ -27,6 +23,7 @@ import { Tag } from 'tdesign-vue';
 export default Vue.extend({
   data() {
     return {
+      src: '',
       // renderMask 支持插槽
       // eslint-disable-next-line
       renderMask: (h) => (
@@ -74,6 +71,12 @@ export default Vue.extend({
       ),
     };
   },
+  created() {
+    const timer = setTimeout(() => {
+      this.src = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
+      clearTimeout(timer);
+    }, 100);
+  },
   methods: {},
 });
 </script>
diff --git a/src/image/image.tsx b/src/image/image.tsx
@@ -53,7 +53,7 @@ export default defineComponent({
       ([src, globalConfig]) => {
         const { replaceImageSrc } = globalConfig || {};
         const tmpUrl = isFunction(replaceImageSrc) ? replaceImageSrc(props) : src;
-        if (tmpUrl === src) return;
+        if (tmpUrl === imageStrSrc.value && imageStrSrc.value) return;
         imageStrSrc.value = tmpUrl;
       },
       { immediate: true },

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -57619,7 +57619,7 @@ exports[`csr snapshot test > csr test ./src/image/_example/extra-always.vue 1`]
           <img
             alt=""
             class="t-image t-image--fit-fill t-image--position-center"
-            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            src=""
           />
           <div
             class="t-image__loading"

diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
@@ -470,7 +470,7 @@ exports[`ssr snapshot test > renders ./src/icon/_example/single.vue correctly 1`
 
 exports[`ssr snapshot test > renders ./src/image/_example/avif.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"max-width:100%;\\"><picture><source type=\\"image/avif\\" srcset=\\"https://tdesign.gtimg.com/img/tdesign-image.avif\\"><source type=\\"image/webp\\" srcset=\\"https://tdesign.gtimg.com/img/tdesign-image.webp\\"><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" alt=\\"\\" class=\\"t-image t-image--fit-scale-down t-image--position-center\\"></picture><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div></div></div><div class=\\"t-space-item\\"><span>.avif / .webp</span></div></div>"`;
 
-exports[`ssr snapshot test > renders ./src/image/_example/extra-always.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-horizontal\\" style=\\"gap:32px;\\"><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><strong style=\\"font-size:20px;\\">有遮罩</strong></div><div class=\\"t-space-item\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:284px;height:160px;\\"><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" alt=\\"\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div><div class=\\"t-image__overlay-content\\"><div style=\\"background:rgba(0,0,0,.4);height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:22px;\\"><span class=\\"t-tag t-tag--warning t-tag--dark t-tag--mark\\" style=\\"border-radius:3px;background:transparent;color:#fff;\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-print\\" style=\\"font-size:16;\\"><path fill=\\"currentColor\\" d=\\"M4 2h16v5h3.5v11H19v4H5v-4H.5V7H4V2zm2 5h12V4H6v3zM2.5 9v7H5v-2h14v2h2.5V9h-19zM17 16H7v4h10v-4zm0-5.5h2v2h-2v-2z\\"></path></svg> 高清</span></span></div></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><strong style=\\"font-size:20px;\\">无遮罩</strong></div><div class=\\"t-space-item\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:284px;height:160px;\\"><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" alt=\\"\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div><div class=\\"t-image__overlay-content\\"><span class=\\"t-tag t-tag--warning t-tag--dark t-tag--mark\\" style=\\"position:absolute;right:8px;bottom:8px;border-radius:3px;background:rgba(236,242,254,1);color:rgba(0,82,217,1);\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-print\\" style=\\"font-size:16;\\"><path fill=\\"currentColor\\" d=\\"M4 2h16v5h3.5v11H19v4H5v-4H.5V7H4V2zm2 5h12V4H6v3zM2.5 9v7H5v-2h14v2h2.5V9h-19zM17 16H7v4h10v-4zm0-5.5h2v2h-2v-2z\\"></path></svg> 高清</span></span></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > renders ./src/image/_example/extra-always.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-horizontal\\" style=\\"gap:32px;\\"><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><strong style=\\"font-size:20px;\\">有遮罩</strong></div><div class=\\"t-space-item\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:284px;height:160px;\\"><img src=\\"\\" alt=\\"\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div><div class=\\"t-image__overlay-content\\"><div style=\\"background:rgba(0,0,0,.4);height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:22px;\\"><span class=\\"t-tag t-tag--warning t-tag--dark t-tag--mark\\" style=\\"border-radius:3px;background:transparent;color:#fff;\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-print\\" style=\\"font-size:16;\\"><path fill=\\"currentColor\\" d=\\"M4 2h16v5h3.5v11H19v4H5v-4H.5V7H4V2zm2 5h12V4H6v3zM2.5 9v7H5v-2h14v2h2.5V9h-19zM17 16H7v4h10v-4zm0-5.5h2v2h-2v-2z\\"></path></svg> 高清</span></span></div></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><strong style=\\"font-size:20px;\\">无遮罩</strong></div><div class=\\"t-space-item\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" style=\\"width:284px;height:160px;\\"><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" alt=\\"\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div><div class=\\"t-image__overlay-content\\"><span class=\\"t-tag t-tag--warning t-tag--dark t-tag--mark\\" style=\\"position:absolute;right:8px;bottom:8px;border-radius:3px;background:rgba(236,242,254,1);color:rgba(0,82,217,1);\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-print\\" style=\\"font-size:16;\\"><path fill=\\"currentColor\\" d=\\"M4 2h16v5h3.5v11H19v4H5v-4H.5V7H4V2zm2 5h12V4H6v3zM2.5 9v7H5v-2h14v2h2.5V9h-19zM17 16H7v4h10v-4zm0-5.5h2v2h-2v-2z\\"></path></svg> 高清</span></span></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > renders ./src/image/_example/extra-hover.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-image__wrapper t-image__wrapper--shape-square t-image__wrapper--need-hover\\" style=\\"width:284px;height:160px;\\"><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" alt=\\"\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><div class=\\"t-space-item\\">图片加载中</div></div></div><div class=\\"t-image__overlay-content t-image__overlay-content--hidden\\"><div style=\\"background:rgba(0,0,0,.4);color:#fff;height:100%;display:flex;align-items:center;justify-content:center;\\">预览</div></div></div>"`;