Question

我正在尝试使用markdown创建博客。我的博客的图片必须在元数据中给出

---
title: 'First Blog'
description: 'First blog description'
image: ../../common/src/assets/image/stack.png
author: 'StackOverflow'
---

我已经如下配置了next.config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['reusecore', 'common']);
const withOptimizedImages = require('next-optimized-images');
const withFonts = require('next-fonts');
const withCSS = require('@zeit/next-css');
const withImages = require('next-images');

module.exports = withPlugins(
  [
    [withTM],
    [
      withOptimizedImages,
      {
        mozjpeg: {
          quality: 90,
        },
        webp: {
          preset: 'default',
          quality: 90,
        },
      },
    ],
    withImages,
    withFonts,
    withCSS,
  ],
  {
    distDir: '../../dist/functions/next',
    target: 'serverless',
    webpack: function (config) {
      config.module.rules.push({
        test: /\.md$/,
        use: 'raw-loader',
      })
      return config
    },
  }
);

我已经将图片标签的来源给了

<img src={require(`${post.frontmatter.image}`)} />

以上操作均无效，因此我直接提供了源代码以测试下一张图片

<img src={require("../../common/src/assets/image/stack.png")} />

两者均无效，并且屏幕上未加载图像。我在浏览器上检查了图像src是否显示为“ data：image / png; base64，bW9kdWxlLmV4cG9ydHMgPSAiL19uZXh0L3N0YXRpYy9pbWFnZXMvbG9nby1lZDJmNzhkMmi2WkZ0WZ1W1ZW3D0W1D0W1D0D0D0D0N0

感谢您在此问题上的任何帮助。

未从Markdown元数据加载Nextjs图像

0 个答案: