初始化

wwf

8 天以前 938c3e5a587ce950a94964ea509b9e7f8834dfae

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
'use client'
 
import { basePath } from '@/utils/var'
import { useEffect } from 'react'
import { usePathname } from 'next/navigation'
 
export default function RoutePrefixHandle() {
  const pathname = usePathname()
  const handleRouteChange = () => {
    const addPrefixToImg = (e: HTMLImageElement) => {
      const url = new URL(e.src)
      const prefix = url.pathname.substr(0, basePath.length)
      if (prefix !== basePath) {
        url.pathname = basePath + url.pathname
        e.src = url.toString()
      }
    }
    // create an observer instance
    const observer = new MutationObserver((mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
          // listen for newly added img tags
          mutation.addedNodes.forEach((node) => {
            if (((node as HTMLElement).tagName) === 'IMG')
              addPrefixToImg(node as HTMLImageElement)
          })
        }
        else if (mutation.type === 'attributes' && (mutation.target as HTMLElement).tagName === 'IMG') {
          // if the src of an existing img tag changes, update the prefix
          if (mutation.attributeName === 'src')
            addPrefixToImg(mutation.target as HTMLImageElement)
        }
      }
    })
 
    // configure observation options
    const config = {
      childList: true,
      attributes: true,
      subtree: true,
      attributeFilter: ['src'],
    }
 
    observer.observe(document.body, config)
  }
 
  useEffect(() => {
    if (basePath)
      handleRouteChange()
  }, [pathname])
 
  return null
}