<p>Ich versuche, SVG- und PNG-Dateien als Pfade aus dem Verzeichnis /static/ zu laden, um sie dynamisch als Favoriten zu verwenden. </p> <p>Ich habe alles gemäß der Dokumentation konfiguriert: </p> <pre class="brush:php;toolbar:false;">./src/model/view/<SomeView.ts> ./static/<SomeFile.png|svg> ./src/custom.d.ts ./tsconfig.json ./webpack.config.js ./package.json</pre> <p>Beispielansicht <code>BrowserView.ts</code></p> <pre class="brush:php;toolbar:false;">import FaviconPng from "../../../static/favicon_browser-32x32.png"; importiere FaviconSvg aus „../../../static/favicon-browser.svg“; import { View } from "./View"; Die Exportklasse BrowserView implementiert View { public readonly faviconPng = FaviconPng; public readonly faviconSvg = FaviconSvg; }</pre> <p>Benutzerdefinierte Typdeklaration <code>custom.d.ts</code></p> <pre class="brush:php;toolbar:false;">deklariere das Modul "*.svg" const path: string; export = Pfad; } Deklarieren Sie das Modul „*.png“ { const path: string; export = Pfad; }</pre> <p><code>tsconfig.json</code></p> <pre class="brush:php;toolbar:false;">{ "compilerOptions" : { "esModuleInterop": true, "experimentalDecorators": wahr, "jsx": "reagieren", "moduleResolution": "node", "streng": wahr, „Ziel“: „ES6“ }, "einschließen" "./src/model/view/*", "./src/custom.d.ts" ] }</pre> <p><code>webpack.config.js</code></p> <pre class="brush:php;toolbar:false;">module.exports = { Modul: { Regeln: [ { test: /.(jpe?g|png|svg)$/, Verwenden Sie: "URL-Loader" } ] } };</pre> <p><code>package.json</code> enthält <code>webpack</code></p> <p>但是我仍然遇到了这个错误:</p> <pre class="brush:php;toolbar:false;">FEHLER in ./static/favicon_browser-32x32.png 1:0 Modulanalyse fehlgeschlagen: Unerwartetes Zeichen „�“ (1:0) Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten. Derzeit sind keine Loader für die Verarbeitung dieser Datei konfiguriert. Siehe https://webpack.js.org/concepts#loaders (Quellcode für diese Binärdatei weggelassen) @ ./src/model/view/BrowserView.ts 1:0-68 7:26-36 @ ./src/App.tsx 34:0-69 73:33-51 162:17-40 224:17-40 @ ./src/index.tsx 4:0-32 5:36-41 FEHLER in ./static/favicon_browser.svg 1:0 Modulanalyse fehlgeschlagen: Unerwartetes Token (1:0) Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten. Derzeit sind keine Loader für die Verarbeitung dieser Datei konfiguriert. Siehe https://webpack.js.org/concepts#loaders > <?xml version="1.0" Encoding="UTF-8"?> <svg id="uuid-00b901b6-ce54-412b-a6b8-3c8e80482087" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 32"> <defs> <style>.uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ isolation:isolate; Füllung:schwarz; } @media (prefers-color-scheme: dunkel) { .uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ fill:white; } }</style> </defs> <path class="uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3" d="m7,52,..." /> </svg> @ ./src/model/view/BrowserView.ts 2:0-62 8:26-36 @ ./src/App.tsx 34:0-69 73:33-51 162:17-40 224:17-40 @ ./src/index.tsx 4:0-32 5:36-41</pre> <p> 如何从该目录加载图像作为路径来更改网站图标？</p> <pre class="brush:php;toolbar:false;">private updateFavicon(view: View): void { // 通过id标签获取元素 const favicon_svg: HTMLElement = document.getElementById("favicon_svg")!; const favicon_png: HTMLElement = document.getElementById("favicon_png")!; // 设置图标 favicon_svg.setAttribute("href", view.faviconSvg); favicon_png.setAttribute("href", view.faviconPng); }</pre></p>