webpack 从静态目录react和typescript加载png和svg文件作为路径

soat7uwm  于 2023-02-12  发布在  Webpack
关注(0)|答案(1)|浏览(170)

我试图从/static/ dir中加载svgpng文件作为路径,以便动态地将它们用作favicon。
我根据文档配置了所有内容:

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

示例视图BrowserView.ts

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

cusom类型声明custom.d.ts

declare module "*.svg" {
  const path: string;
  export = path;
}

declare module "*.png" {
  const path: string;
  export = path;
}

tsconfig.json

{
  "compilerOptions" : {
    "esModuleInterop" : true,
    "experimentalDecorators" : true,
    "jsx" : "react",
    "moduleResolution" : "node",
    "strict" : true,
    "target" : "ES6"
  },
  "include" : [
    "./src/model/view/*",
    "./src/custom.d.ts"
  ]
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|svg)$/,
        use: "url-loader"
      }
    ]
  }
};

并且在package.json中包含了webpackurl-loader
我仍然得到这个错误:

ERROR in ./static/favicon_browser-32x32.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./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

ERROR in ./static/favicon_browser.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 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; fill:black; } @media (prefers-color-scheme: dark) { .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

我想它不能识别加载程序配置,但我不知道我可以改变什么。
我怎样才能从这个目录中加载图像作为路径来改变图标呢?

private updateFavicon(view: View): void {
    // Get the element by id tag
    const favicon_svg: HTMLElement = document.getElementById("favicon_svg")!;
    const favicon_png: HTMLElement = document.getElementById("favicon_png")!;

    // Set the icon
    favicon_svg.setAttribute("href", view.faviconSvg);
    favicon_png.setAttribute("href", view.faviconPng);
  }
fcwjkofz

fcwjkofz1#

最好使用相对于您的项目的相对路径。由于未指定webpack版本,因此难以回答。
这里是webpack 5镜像使用的链接https://webpack.js.org/guides/asset-management/#loading-images

相关问题