使用React和TypeScript，从静态目录中加载png和svg文件的路径
<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>
<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
> <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>
