svg ファイルと png ファイルをファビコンとして動的に使用するために、/static/ ディレクトリからパスとしてロードしようとしています。ドキュメントに従ってすべてを設定しました: ./src/model/view/<SomeView.ts>./static/<SomeFile.png|svg>./src/custom.d.ts./tsconfig.json./webpack。 config.js./package.json のサンプルビュー B

プロジェクトを基準とした相対パスを使用するのが最善です Webpackのバージョンが明記されていないため、回答するのは困難です。 webpack 5 イメージで使用されるリンクは次のとおりです https://webpack.js.org/guides/asset-management/#loading-images

React と TypeScript を使用して静的ディレクトリから png および svg ファイルをロードするパス-PHP中国語ネットワークQ&A

ファビコンとして動的に使用するために、svg ファイルと png ファイルを /static/ ディレクトリからのパスとしてロードしようとしています。 ドキュメントに従ってすべてを設定しました: <pre class="brush:php;toolbar:false;">./src/model/view/<SomeView.ts> ./static/ ./src/custom.d.ts ./tsconfig.json ./webpack.config.js ./package.json</pre> サンプルビュー <code>BrowserView.ts</code> <pre class="brush:php;toolbar:false;">「../../../static/favicon_browser-32x32.png」から FaviconPng をインポートします; 「../../../static/favicon-browser.svg」から FaviconSvg をインポートします; import { View } from "./View"; エクスポートクラス BrowserView は View {を実装します。 public readonly faviconPng = FaviconPng; public readonly faviconSvg = FaviconSvg; }</pre> カスタム型宣言 <code>custom.d.ts</code> <pre class="brush:php;toolbar:false;">モジュール "*.svg" を宣言 { 定数パス: 文字列; エクスポート = パス; } モジュール「*.png」を宣言 { 定数パス: 文字列; エクスポート = パス; }</pre> <code>tsconfig.json</code> <pre class="brush:php;toolbar:false;">{ "コンパイラーオプション" : { "esModuleInterop" : true、 "experimentalDecorators" : true、 "jsx" : "反応"、 "moduleResolution" : "ノード"、 "厳密" : true、「ターゲット」：「ES6」 }、「含める」 : [ "./src/model/view/*"、「./src/custom.d.ts」】 }</pre> <code>webpack.config.js</code> <pre class="brush:php;toolbar:false;">module.exports = { モジュール: { ルール: [ { テスト: /\.(jpe?g|png|svg)$/, 使用: 「url-loader」 } 】 } };</pre> <code>package.json</code> には、<code>webpack</code> と <code>url-loader</code> が含まれています。 但是我仍然遇到了这个错误： <pre class="brush:php;toolbar:false;">./static/favicon_browser-32x32.png 1:0 でエラーが発生しましたモジュールの解析に失敗しました: 予期しない文字「�」(1:0) このファイルタイプを処理するには、適切なローダーが必要になる場合があります。現在、このファイルを処理するように構成されているローダーはありません。 https://webpack.js.org/concepts#loaders を参照してください。 (このバイナリファイルではソースコードは省略されています) @ ./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 ./static/favicon_browser.svg 1:0 のエラーモジュールの解析に失敗しました: 予期しないトークン (1:0) このファイルタイプを処理するには、適切なローダーが必要になる場合があります。現在、このファイルを処理するように構成されているローダーはありません。 https://webpack.js.org/concepts#loaders を参照してください。 > <?xml バージョン = "1.0"エンコーディング="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{ 分離:分離;塗りつぶし:黒; } @media (カラースキームを優先: ダーク) { .uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ fill:white; } } </defs> <パスクラス="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 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>