使用React和TypeScript，從靜態目錄載入png和svg檔案的路徑

Question

<p>我正在嘗試從/static/目錄中載入svg和png檔案作為路徑，以便動態地將它們用作網站圖示。 </p> <p>我根據文件配置了所有內容：</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>範例視圖 <code>BrowserView.ts</code></p> <pre class="brush:php;toolbar:false;">import FaviconPng from "../../../static/favicon_browser-32x32.png"; import FaviconSvg from "../../../static/favicon-browser.svg"; import { View } from "./View"; export class BrowserView implements View { public readonly faviconPng = FaviconPng; public readonly faviconSvg = FaviconSvg; }</pre> <p>自訂類型聲明 <code>custom.d.ts</code></p> <pre class="brush:php;toolbar:false;">declare module "*.svg" { const path: string; export = path; } declare module "*.png" { const path: string; export = path; }</pre> <p><code>tsconfig.json</code></p> <pre class="brush:php;toolbar:false;">{ "compilerOptions" : { "esModuleInterop" : true, "experimentalDecorators" : true, "jsx" : "react", "moduleResolution" : "node", "strict" : true, "target" : "ES6" }, "include" : [ "./src/model/view/*", "./src/custom.d.ts" ] }</pre> <p><code>webpack.config.js</code></p> <pre class="brush:php;toolbar:false;">module.exports = { module: { rules: [ { test: /\.(jpe?g|png|svg)$/, use: "url-loader" } ] } };</pre> <p><code>package.json</code>中包含了<code>webpack</code>和<code>url-loader</code>。</p> <p>但我還是遇到了這個錯誤：</p>

 ./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
>  <svg id=“uuid-00b901b6-ce54-412b-a6b8-3c8e80482087” xmlns=“http://www.w3.org/2000/svg” viewBox="0 0 26 32"> <定義> <樣式>.uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ 隔離：隔離；填充：黑色； } @media（首選顏色方案：深色）{ .uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ 填充：白色； } }</風格> </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>

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>

Answer 1

最好使用相對路徑，相對於您的專案 由於未指定webpack版本，很難回答。

這裡是webpack 5圖片使用的鏈接 https://webpack.js.org/guides/asset-management/#loading-images