小编Hug*_*hes的帖子

我正在尝试加载要在构建时加载的 markdown 文件。我已经设置了一个使用 Typescript 并使用material_ui博客主题的create-react-app。

import ReactMarkdown from 'markdown-to-jsx';
import post1 from './blog-post.1.md';

export default function Main(props: MainProps) {
  const classes = useStyles();
  const { posts, title } = props;

  return (
    <Grid item xs={12} md={8}>
      <Typography variant="h6" gutterBottom>
        {title}
      </Typography>
      <Divider />
      {posts.map((post) => (
        <Markdown className={classes.markdown} key={post.substring(0, 40)}>
          {post}
        </Markdown>
      ))}
    </Grid>
  );
}

如果帖子被指定为 markdown，它将正确呈现：const post = '# Sample blog post #### April 1, 2020 by [Olivier](/)'

所以问题是 .md 文件没有加载到变量中。

运行时npm start，html …

语境

我启动了一个 Next.js 项目，需要从两个不同的来源获取图像资源：

1. 在存储库的本地公共文件夹中：<Image src="/logo.png" width={50} height={50} alt='Logo' layout="fixed"/>
2. 来自云提供商 ( Cloudinary ) 的资产：<Image src="<transformations>/<version>/<public_id>.jpg" width={400} height={400} alt='Planning garden image'/>

问题

在文件中设置图像路径时next.config.js，要从公共文件加载的图像现在指向 Cloudinary。

图像加载器路径在 Next.js 配置文件中设置：

// next.config.js

module.exports = {
  images: {
    loader: 'cloudinary',
    path: 'https://res.cloudinary.com/<cloud_name>/image/upload',
  },
}

这意味着上面的 1. 还使用 Image src 的相对 URL，并在其前面加上 config 文件夹中的路径。对于存储在公共文件夹中的图像来说，这是不正确的 - 如果未设置 Cloudinary 的配置，公共文件夹将是默认路径。

我可以拥有来自不同来源的图像路径吗？具体取决于我使用它们的上下文。我不想将所有图像都放在 Cloudinary 上。我希望 1 仍然来自公用文件夹。