Laluan untuk memuatkan fail png dan svg daripada direktori statik menggunakan React dan TypeScript

Question

Saya cuba memuatkan fail svg dan png sebagai laluan dari direktori /static/ untuk menggunakannya secara dinamik sebagai favicon.

Saya mengkonfigurasi semuanya mengikut dokumentasi:

./src/model/view/<SomeView.ts>
./static/<SomeFile.png|svg>
./src/custom.d.ts
./tsconfig.json
./webpack.config.js
./package.json

Contoh Paparan BrowserView.ts

import FaviconPng daripada "../../../static/favicon_browser-32x32.png";
import FaviconSvg daripada "../../../static/favicon-browser.svg";
import { View } dari "./View";

kelas eksport BrowserView melaksanakan View {
  awam baca sahaja faviconPng = FaviconPng;
  awam baca sahaja faviconSvg = FaviconSvg;
}

Pengisytiharan jenis tersuai custom.d.ts

istiharkan modul "*.svg"
  laluan const: string;
  eksport = laluan;
}

mengisytiharkan modul "*.png"
  laluan const: string;
  eksport = laluan;
}

tsconfig.json

{
  "Pilihan pengkompil"
    "esModuleInterop"
    "Penghias percubaan"
    "jsx" : "bertindak balas",
    "modulResolution" : "nod",
    "ketat"
    "sasaran" : "ES6"
  },
  "termasuk"
    "./src/model/view/*",
    "./src/custom.d.ts"
  ]
}

webpack.config.js

module.exports = {
  modul: {
    peraturan: [
      {
        ujian: /.(jpe?g|png|svg)$/,
        gunakan: "url-loader"
      }
    ]
  }
};

package.json mengandungi webpack dan url-loader.

但是我仍然遇到了这个错误：

RALAT dalam ./static/favicon_browser-32x32.png 1:0
Penghuraian modul gagal: aksara tidak dijangka '�' (1:0)
Anda mungkin memerlukan pemuat yang sesuai untuk mengendalikan jenis fail ini, pada masa ini tiada pemuat dikonfigurasikan untuk memproses fail ini. Lihat https://webpack.js.org/concepts#loaders
(Kod sumber ditinggalkan untuk fail binari ini)
 @ ./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

RALAT dalam ./static/favicon_browser.svg 1:0
Penghuraian modul gagal: Token tidak dijangka (1:0)
Anda mungkin memerlukan pemuat yang sesuai untuk mengendalikan jenis fail ini, pada masa ini tiada pemuat dikonfigurasikan untuk memproses fail ini. Lihat https://webpack.js.org/concepts#loaders
> <?xml version="1.0" pengekodan="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; isi:hitam; } @media (lebih suka skema warna: gelap) { .uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ fill:white; } }</style> </defs> <kelas laluan="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

我猜测它无法识别加载器配置，但我不确定我可以改变什么。

< 如何从该目录加载图像作为路径来更改网站图标？

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);
  }

Answer 1

Lebih baik menggunakan laluan relatif, berbanding projek anda Sukar untuk menjawab kerana versi webpack tidak dinyatakan.

Berikut ialah pautan untuk penggunaan imej webpack 5 https://webpack.js.org/guides/asset-management/#loading-images