1
setImageLoaded(false)
2

3
if (smallImageUrl) {
4
  setUniqueKey([Date.now](https://date.now)() + Math.random())
5
  try {
6
    const baseUrl = `https://fp.ablueforce.com/api/files/${smallImageUrl}/media`
7
    // Add timestamp to avoid caching
8
    const cacheBuster = [Date.now](https://date.now)().toString(36) + Math.random().toString(36).substr(2, 5)
9
    const newImageUrl = `${baseUrl}?v=${cacheBuster}`
10
    setImageUrl(newImageUrl)
11

12
    // Increment the key to force a complete re-render of the Image component
13
  } catch (error) {
14
    console.error("Error setting image URL:", error)
15
    setImageUrl(DEFAULT_IMAGE)
16
  }
17

18
} else {
19
  setImageUrl(DEFAULT_IMAGE)
20
}

1
      {/* Always render the AspectRatio container to ensure consistent layout */}
2
      
3
        {isUploading ? (
4
          
5

6
            
7

8
              
9
              Uploading image...
10

11

12
            
13

14
          
15

16
        ) : (
17
           {
18
              console.error('Image load failed:', imageUrl);
19
              ([e.target](https://e.target) as HTMLImageElement).src = DEFAULT_IMAGE;
20
            }}
21
          />
22
        )}
23
      
24

25
      {/* Position buttons vertically on the right side */}
26
      {smallImageUrl && !isUploading && (
27
        
28

29
          
30
            
31
            Replace
32
          
33
          
34
            
35
            Remove
36
          
37
        
38

39
      )}
40
    
41

42
  )}
43
  
44
  

1
 {
2
	try {
3
	  // 先设置loading状态
4
	  form.setValue("smallImageUrl", "uploading...")
5
	  const response = await uploadFile(file)
6
	  form.setValue("smallImageUrl", [response.data.id](https://response.data.id))
7
	} catch (error) {
8
	  form.setValue("smallImageUrl", null)
9
	  console.error("Error uploading file:", error)
10
	}
11
  }}
12