React と TypeScript を使用して静的ディレクトリから png および svg ファイルをロードするパス
P粉122932466
2023-08-30 20:10:18
<p>ファビコンとして動的に使用するために、svg ファイルと png ファイルを /static/ ディレクトリからのパスとしてロードしようとしています。 </p>
<p>ドキュメントに従ってすべてを設定しました: </p>
<pre class="brush:php;toolbar:false;">./src/model/view/<SomeView.ts>
./static/
./src/custom.d.ts
./tsconfig.json
./webpack.config.js
./package.json</pre>
<p>サンプル ビュー <code>BrowserView.ts</code></p>
<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>
<p>カスタム型宣言 <code>custom.d.ts</code></p>
<pre class="brush:php;toolbar:false;">モジュール "*.svg" を宣言 {
定数パス: 文字列;
エクスポート = パス;
}
モジュール「*.png」を宣言 {
定数パス: 文字列;
エクスポート = パス;
}</pre>
<p><code>tsconfig.json</code></p>
<pre class="brush:php;toolbar:false;">{
"コンパイラーオプション" : {
"esModuleInterop" : true、
"experimentalDecorators" : true、
"jsx" : "反応"、
"moduleResolution" : "ノード"、
"厳密" : true、
「ターゲット」：「ES6」
}、
「含める」 : [
"./src/model/view/*"、
「./src/custom.d.ts」
】
}</pre>
<p><code>webpack.config.js</code></p>
<pre class="brush:php;toolbar:false;">module.exports = {
モジュール: {
ルール: [
{
テスト: /\.(jpe?g|png|svg)$/,
使用: 「url-loader」
}
】
}
};</pre>
<p><code>package.json</code> には、<code>webpack</code> と <code>url-loader</code> が含まれています。</p>
<p>但是我仍然遇到了这个错误：</p>
<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
<p>私たちはアドローダの構成を不正に検査していますが、変更できるかどうかはわかりません。</p><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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
プロジェクトを基準とした相対パスを使用するのが最善です Webpackのバージョンが明記されていないため、回答するのは困難です。
webpack 5 イメージで使用されるリンクは次のとおりです https://webpack.js.org/guides/asset-management/#loading-images