如何在反应应用程序中添加图标？

Question

I want to add favicon in my react application.我想在我的反应应用程序中添加 favicon。 I saw this post and followed but it is not working in my case.我看到了这篇文章并关注了它，但它不适用于我的情况。 I added favicon.ico inside public folder where index.html is present.我在存在 index.html 的公共文件夹中添加了 favicon.ico。 This is my directory structure这是我的目录结构

This is the snippet of my index.html这是我的索引的片段。html

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <meta name='color-scheme' content='light'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>My App</title>
    <link rel="icon" href="./public/favicon.ico"></link>
    <script src="/env-config.js"></script>
  </head>
  <body>
    <div id="root"></div>   
  </body>
</html>

This is the snippet of my webpack.config.js这是我的 webpack.config.js 的片段

const { webpackConfig, webpackMerge, htmlOverlay } = require('just-scripts');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = webpackMerge.merge(
  webpackConfig({}),
  htmlOverlay({
    template: 'public/index.html'
  }),
  {
    output: {
      publicPath: '/'
    },
    devServer: {
      historyApiFallback: true
    },
    plugins:[
      new webpack.DefinePlugin({ 
        'process.env.API_URL': JSON.stringify(process.env.API_URL)
      }),
      new HtmlWebpackPlugin({
        favicon: './public/favicon.ico',
      })
    ]
  }
);

I added HtmlWebpackPlugin as shown above but getting this error on npm run build如上所示，我添加了 HtmlWebpackPlugin，但在 npm 运行构建时出现此错误

ERROR in Conflict: Multiple assets emit different content to the same filename index.html

webpack 5.73.0 compiled with 1 error in 72911 ms
[12:42:26 pm] x Error detected while running 'webpack'
[12:42:26 pm] x ------------------------------------
[12:42:26 pm] x Webpack failed with 1 error(s).
[12:42:26 pm] x ------------------------------------
[12:42:26 pm] x finished 'build' in 87.6s with errors
[12:42:26 pm] x Error previously detected. See above for error messages.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-report-fluent-single@0.1.0 build: `just-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-report-fluent-single@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

When I removed the HtmlWebpackPlugin, the build is successful but I am not seeing the favicon.ico in the dist folder and also the favicon is not visible in the browser.当我删除 HtmlWebpackPlugin 时，构建成功，但我没有在 dist 文件夹中看到 favicon.ico，并且在浏览器中也看不到 favicon。

I am able to see the favicon only at the homepage and I checked the network tab and getting 304 ok status on http://localhost:8080/public/favicon.ico But when I render other components and navigate to different url, I am getting 404 Not found on http://localhost:8080/home/public/favicon.ico我只能在主页上看到图标，我检查了网络选项卡并在 http://localhost:8080/public/favicon.ico 上获得 304 ok 状态但是当我渲染其他组件并导航到不同的 url 时，我在 http://localhost:8080/home/public/favicon.ico 上找不到 404

I also tried adding %PUBIC_URL%/ in index.html href before the path of favicon but getting the error of我还尝试在 favicon 的路径之前的 index.html href 中添加 %PUBIC_URL%/ 但得到错误

URIError: Failed to decode param '/%PUBLIC_URL%/public/favicon.ico'

And in network tab I am getting 400 Bad Request error on http://localhost:8080/%PUBLIC_URL%/public/favicon.ico在网络选项卡中，我在 http://localhost:8080/%PUBLIC_URL%/public/favicon.ico 上收到 400 Bad Request 错误

In this case I am able to see the favicon in localhost with errors in console but not able to see icon when I deploy my app.在这种情况下，我可以在 localhost 中看到带有控制台错误的图标，但在部署我的应用程序时看不到图标。

Answer 1

first you can try: chagne favicon.ico and try a svg file href="./public/favicon.svg"首先您可以尝试： chagne favicon.ico并尝试svg file href="./public/favicon.svg"

if this doesn't work:如果这不起作用：

add this new rule to your webpack.config.json :将此新规则添加到您的webpack.config.json ：

module: {
    // configuration regarding modules
    rules: [
          {
            test: /\.(svg|png|jpg|jpeg|gif|ico)$/,
            exclude: /node_modules/,
          }

如何在反应应用程序中添加图标？

问题描述

1 个解决方案

解决方案1
0 2022-08-22 07:56:24

如何在反应应用程序中添加图标？

问题描述

1 个解决方案

解决方案1 0 2022-08-22 07:56:24

解决方案1
0 2022-08-22 07:56:24