fix: input img url fall back image

src/components/auto-image/index.tsx

@@ -70,8 +70,9 @@ const AutoImage: React.FC<
     setIsError(false);
   }, [props.onLoad]);
 
-  const handleOnError = useCallback(() => {
+  const handleOnError = useCallback((e: any) => {
     setIsError(true);
+    e.target.src = fallbackImg;
   }, []);
 
   useEffect(() => {
@@ -127,4 +128,4 @@ const AutoImage: React.FC<
   );
 };
 
-export default React.memo(AutoImage);
+export default AutoImage;

src/locales/en-US/playground.ts

@@ -158,8 +158,7 @@ export default {
   'playground.uploadfile.sizeError':
     'File size exceeds the limit. Maximum allowed: {size}.',
   'playground.uploadImage.url.invalid':
-    'Please enter a direct .png or .jpg image URL (e.g. https://.../image.png). Press ESC to cancel.',
+    'Please enter a direct image URL (e.g. https://.../image.png). Press ESC to cancel.',
-  'playground.uploadImage.url.holder':
+  'playground.uploadImage.url.holder': 'Enter an image URL',
-    'Enter an image URL (supports .png, .jpeg, .jpg)',
   'playground.uploadImage.url.button': 'Add Image from URL'
 };

src/locales/ja-JP/playground.ts

@@ -161,9 +161,8 @@ export default {
   'playground.uploadfile.sizeError':
     'File size exceeds the limit. Maximum allowed: {size}.',
   'playground.uploadImage.url.invalid':
-    'Please enter a direct .png or .jpg image URL (e.g. https://.../image.png). Press ESC to cancel.',
+    'Please enter a direct image URL (e.g. https://.../image.png). Press ESC to cancel.',
-  'playground.uploadImage.url.holder':
+  'playground.uploadImage.url.holder': 'Enter an image URL',
-    'Enter an image URL (supports .png, .jpeg, .jpg)',
   'playground.uploadImage.url.button': 'Add Image from URL'
 };
 
@@ -171,7 +170,7 @@ export default {
 // 1. 'playground.rerank.query.validate': 'The query is required.'
 // 2.  'playground.image.generate.error': 'Something went wrong. The image could not be generated.',
 // 3. 'playground.uploadfile.sizeError': 'File size exceeds the limit. Maximum allowed: {size}.'
-// 4. 'playground.uploadImage.url.invalid': 'Please enter a direct .png or .jpg image URL(e.g. https://.../image.png). Press ESC to cancel.',
+// 4. 'playground.uploadImage.url.invalid': 'Please enter a direct image URL(e.g. https://.../image.png). Press ESC to cancel.',
-// 5. 'playground.uploadImage.url.holder': 'Enter an image URL (supports .png, .jpeg, .jpg)'
+// 5. 'playground.uploadImage.url.holder': 'Enter an image URL'
 // 6.  'playground.uploadImage.url.button': 'Add Image from URL'
 // ========== End of To-Do List ==========

src/locales/ru-RU/playground.ts

@@ -155,14 +155,13 @@ export default {
   'playground.uploadfile.sizeError':
     'Размер файла превышает ограничение. Максимальный размер: {size}.',
   'playground.uploadImage.url.invalid':
-    'Please enter a direct .png or .jpg image URL (e.g. https://.../image.png). Press ESC to cancel.',
+    'Please enter a direct image URL (e.g. https://.../image.png). Press ESC to cancel.',
-  'playground.uploadImage.url.holder':
+  'playground.uploadImage.url.holder': 'Enter an image URL',
-    'Enter an image URL (supports .png, .jpeg, .jpg)',
   'playground.uploadImage.url.button': 'Add Image from URL'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-// 1. 'playground.uploadImage.url.invalid': 'Please enter a direct .png or .jpg image URL(e.g. https://.../image.png). Press ESC to cancel.',
+// 1. 'playground.uploadImage.url.invalid': 'Please enter a direct image URL(e.g. https://.../image.png). Press ESC to cancel.',
-// 2. 'playground.uploadImage.url.holder': 'Enter an image URL (supports .png, .jpeg, .jpg)',
+// 2. 'playground.uploadImage.url.holder': 'Enter an image URL',
 // 3.  'playground.uploadImage.url.button': 'Add Image from URL'
 // ========== End of To-Do List ==========

src/locales/zh-CN/playground.ts

@@ -151,8 +151,7 @@ export default {
   'playground.uploadfile.sizeError':
     '上传的文件大小超过限制，最大允许 {size}。',
   'playground.uploadImage.url.invalid':
-    '请输入直接的 .png 或 .jpg 图片链接（例如：https://…/image.png）。按 ESC 可取消。',
+    '请输入直接的图片链接（例如：https://…/image.png）。按 ESC 可取消。',
-  'playground.uploadImage.url.holder':
+  'playground.uploadImage.url.holder': '请输入图片链接',
-    '请输入图片链接（支持 .png、.jpeg、.jpg 格式）',
   'playground.uploadImage.url.button': '从链接添加图片'
 };

src/pages/playground/hooks/use-add-image.tsx

@@ -1,5 +1,6 @@
 import DropDownActions from '@/components/drop-down-actions';
 import {
+  DeleteOutlined,
   LinkOutlined,
   PictureOutlined,
   UploadOutlined
@@ -7,9 +8,25 @@ import {
 import { useIntl } from '@umijs/max';
 import { Button, Input, Tooltip } from 'antd';
 import { useRef, useState } from 'react';
+import styled from 'styled-components';
 import UploadImg from '../components/upload-img';
 
-const regex = /(https?:\/\/\S+\.(png|jpg|jpeg))/gi;
+const ImgInputWrapper = styled.div`
+  position: relative;
+  .del-btn {
+    display: none;
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--ant-color-bg-container);
+  }
+  &:hover {
+    .del-btn {
+      display: flex;
+    }
+  }
+`;
 
 const useAddImage = (options: {
   size?: 'small' | 'middle' | 'large';
@@ -31,29 +48,39 @@ const useAddImage = (options: {
     }, 100);
   };
 
-  const handleInputImageUrl = (e: any) => {
+  const handleInputImageUrl = async (e: any) => {
-    const url = e.target.value;
+    const url = e.target.value?.trim();
-    const isValid = regex.test(url);
+
-    setOpenImgTips(!isValid);
+    if (url) {
-    if (isValid) {
       handleUpdateImgList([
         {
           uid: updateUidCount(),
-          dataUrl: e.target.value
+          dataUrl: url
         }
       ]);
-      setIsFromUrl(false);
-    }
-
-    setTimeout(() => {
       setOpenImgTips(false);
-    }, 2000);
+      setIsFromUrl(false);
+    } else {
+      setOpenImgTips(true);
+    }
+    // set openImgTips to false after next frame if is not valid
+    if (!url) {
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          setOpenImgTips(false);
+        }, 3000);
+      });
+    }
+  };
+
+  const handleClose = () => {
+    setIsFromUrl(false);
+    setOpenImgTips(false);
   };
 
   const handleOnEscape = (e: any) => {
     if (e.key === 'Escape') {
-      setIsFromUrl(false);
+      handleClose();
-      setOpenImgTips(false);
     }
   };
 
@@ -64,17 +91,27 @@ const useAddImage = (options: {
         id: 'playground.uploadImage.url.invalid'
       })}
     >
-      <Input
+      <ImgInputWrapper>
-        ref={inputImgRef}
+        <Input
-        status={openImgTips ? 'error' : ''}
+          ref={inputImgRef}
-        placeholder={intl.formatMessage({
+          status={openImgTips ? 'error' : ''}
-          id: 'playground.uploadImage.url.holder'
+          placeholder={intl.formatMessage({
-        })}
+            id: 'playground.uploadImage.url.holder'
-        style={{ width: 360, height: 32 }}
+          })}
-        onBlur={handleInputImageUrl}
+          style={{ width: 360, height: 32 }}
-        onPressEnter={handleInputImageUrl}
+          onBlur={handleInputImageUrl}
-        onKeyDown={handleOnEscape}
+          onPressEnter={handleInputImageUrl}
-      ></Input>
+          onKeyDown={handleOnEscape}
+        ></Input>
+        <div className="del-btn">
+          <Button
+            onClick={handleClose}
+            icon={<DeleteOutlined />}
+            size="small"
+            type="text"
+          ></Button>
+        </div>
+      </ImgInputWrapper>
     </Tooltip>
   ) : null;