在 Next.js 应用程序上的 Chart.js 图中对 pointStyles 使用 react-icons

Question

问题：
我正在尝试使用 react-icons MdNavigation 图标作为pointStyle中的 pointStyle。 该应用程序内置在 Next.js 中。 如果无法对 chart.js pointStyle 使用 react-icons，我愿意使用导入的 SVG、jpg 或 png 图标，但即使我仍然遇到问题，可能是由于我在next.config.js 。

预期结果：
我希望 MdNavigation 图标（ https://react-icons.github.io/react-icons/icons?name=md ）出现在 pointStyles 中。

实际结果：
我已经尝试了一些不同的设置来让它工作，但到目前为止，他们都没有让我更正图标。
使用几种不同的配置时，我遇到了以下错误：

未捕获的 DOMException：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的 HTMLImageElement 在“损坏的”state 中。

配置 #1 以返回上述错误：

const arrow = new Image()
arrow.src = <MdNavigation/>
...
        pointStyle: arrow,

当我进行以下设置时，我得到了同样的错误：

const arrow = new Image()
arrow.src = MdNavigation
...
const mixedChartConfig = {
    type: 'bar',
    data: {
        datasets: [
            {
                label: 'Wind Gust (m/s)',
                data: state.data[0].data.hours
                    .slice(state.firstData, state.lastData)
                    .map(item => {
                        return item.gust.sg
                    }), // gust data here
                type: 'line',
                pointStyle: arrow,
                radius: 15,
                rotation: windDirectionArray
            }
        ],

我还尝试了以下设置，试图为 MdNavigation 图标创建一个包装器：

const arrow = () => {
    <div>
        <MdNavigation/>
    </div>
}

理想情况下，我想将该图标用作 pointStyle。 如果那不可能，我愿意使用另一个 jpg 或 png 图像，但我仍然遇到问题。 以下代码是我尝试使用不同图像时的设置（可能是由我的文件加载器设置引起的。我对这些配置文件还不是很好）。 此设置还给我以下错误：

未捕获的 DOMException：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的 HTMLImageElement 在“损坏的”state 中。

const arrow = new Image()
arrow.src = '../../public/arrow.jpg'
...
const mixedChartConfig = {
    type: 'bar',
    data: {
        datasets: [
            {
                label: 'Wind Gust (m/s)',
                data: state.data[0].data.hours
                    .slice(state.firstData, state.lastData)
                    .map(item => {
                        return item.gust.sg
                    }), // gust data here
                type: 'line',
                pointStyle: arrow,
                radius: 15,
                rotation: windDirectionArray
            }
       ],

加载程序配置（ next.config.js ）：

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
      use: [
        options.defaultLoaders.file-loader,
        {
          loader: 'file-loader',
          options: pluginOptions.options,
        },
      ],
    })

    return config
  },

还尝试在webpack.config.js中进行设置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          publicPath: (url, resourcePath, context) => {
            // `resourcePath` is original absolute path to asset
            // `context` is directory where stored asset (`rootContext`) or `context` option

            // To get relative path you can use
            // const relativePath = path.relative(context, resourcePath);

            if (/my-custom-image\.png/.test(resourcePath)) {
              return `other_public_path/${url}`
            }

            if (/images/.test(context)) {
              return `image_output_path/${url}`
            }

            return `public_path/${url}`
          }
        }
      }
    ]
  }
}

Answer 1

尝试将图像放在您的public中，并在没有...的情况下在那里引用它：

arrow.src = '/arrow.jpg'

这是我的线索： https://stackoverflow.com/a/65793150/194515