- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在用 next-mdx-remote 创建博客& 想要使用 .mdx
中的图片public/
之外的文件文件夹。
这是我的博客项目的完整代码 → https://github.com/deadcoder0904/blog-mdx-remote
我有以下文件夹结构:
.
├── package-lock.json
├── package.json
├── pages
│ ├── _app.js
│ ├── blog
│ │ └── [slug].js
│ ├── dark.css
│ ├── index.js
│ └── new.css
├── posts
│ ├── blog
│ │ ├── hello-world
│ │ │ ├── Rustin_Cohle.jpg
│ │ │ └── index.mdx
│ │ └── shit-world
│ │ └── index.mdx
│ └── tutorials
│ └── console-log-in-javascript
│ └── index.mdx
└── utils
└── mdxUtils.js
我的所有内容都在
posts/
文件夹。
blog/
&
tutorials/
每个帖子都在
blog/
内的自己的文件夹中或
tutorials/
& 每个文件夹都包含该特定帖子中使用的图像。
hello-world
文件夹中,有 1 张图片名为
Rustin_Cohle.jpg
.
hello-world/index.mdx
中使用这张图片文件,但我无法做到。
import
或
require
因为它是
next-mdx-remote
的限制.
Image
的自定义组件使用了
img
在下面并传递给
hydrate
但它也没有用。
export const Image = ({ src, alt }) => (
<img style={{ backgroundColor: 'red' }} src={src} alt={alt} />
)
页面/博客/[slug].js
import hydrate from 'next-mdx-remote/hydrate'
import { Image } from '../components/Image'
const components = { Image }
const Blog = ({ source, frontMatter }) => {
const content = hydrate(source, { components })
return (
<div>
<h1>{frontMatter.title}</h1>
{content}
</div>
)
}
下面的 MDX 文件使用上面的
Image
通过
hydrate
传递的组件.
---
title: Hello World
date: '2019-09-06T14:54:37.229Z'
tags: ['hello', 'world']
author: John Doe
description: This is the first post
---
Hey this is my first post
![Rustin Cohle](./Rustin_Cohle.jpg)
<img src="./Rustin_Cohle.jpg" alt="Rust Cohle" />
<Image src="./Rustin_Cohle.jpg" alt="Rust Cohle" />
This is the end of the first post
我什至尝试使用
MDXProvider
&它也没有工作。
import { MDXProvider } from '@mdx-js/react'
const components = { Image }
const HomePage = ({ posts }) => {
return (
<MDXProvider components={components}>
...
</MDXProvider>
)
}
那我该如何使用图片呢?我希望它们仅位于特定帖子的文件夹中,例如
hello-world
blog 将仅在
hello-world/
中包含其图像文件夹。
最佳答案
我能够在这种情况下加载图像。我的想法是使用 webpack file-loader
完成此操作并向组件映射添加更多信息,以告知当前帖子的放置位置(注意组件功能)。
我的页面 [slug].js 是这样的:
import renderToString from 'next-mdx-remote/render-to-string'
import hydrate from 'next-mdx-remote/hydrate'
import matter from 'gray-matter'
import { getAllPostSlugs, getPostdata } from '../lib/posts'
const components = (slug) => ({
h1: ({ children }) => <h1>{children}</h1>,
img: ({ src, alt }) => {
return (
<p>
<img
alt={alt}
src={require('../content/' + slug + '/' + src).default}
/>
</p>
)
}
})
const Post = ({ source, frontMatter, slug }) => {
const content = hydrate(source, {
components: components(slug)
})
return (
<>
<h1>Post</h1>
<p>{content}</p>
</>
)
}
export async function getStaticPaths() {
const paths = getAllPostSlugs()
return {
paths,
fallback: false
}
}
export async function getStaticProps({ params }) {
const postContent = await getPostdata(params.slug)
const { data, content } = matter(postContent)
const mdxSource = await renderToString(content, {
components: components(params.slug),
scope: data
})
return {
props: {
slug: params.slug,
source: mdxSource,
frontMatter: data
}
}
}
export default Post
还有我的 next.config.js:
module.exports = {
webpack: (config, options) => {
config.module.rules.push({
test: /\.(svg|png|jpe?g|gif|mp4)$/i,
use: [
{
loader: 'file-loader',
options: {
publicPath: '/_next',
name: 'static/media/[name].[hash].[ext]'
}
}
]
})
return config
}
}
Ps:它就像一个魅力与下一个/图像:)
关于javascript - 在 Next JS 中使用 `.mdx` 时,如何在 `public/` 文件夹之外的 `next-mdx-remote` 文件中使用图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63957018/
我有下面的立方体输出 date value ---- ----------- 2021-01-06 10 2021-01-07 Null 2021-01
您好,我一直在研究 MDX,需要一些非常高级的入门类型指导。我已经启动并运行了一个 SQL-Server 2008 R2 数据库,其中包含数据。我想在 MDX 中尝试一些非常简单的事情来熟悉流程。我不
你好我使用 mdx 表达式中的排名为结果提供行号,现在我如何限制行号。检索到的行数,即我想要前 10 行,然后我想要另外 10 行,依此类推。那么我如何在 mdx 表达式本身中应用此类分页 最佳答案
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 想改进这个问题?将问题更新为 on-topic对于堆栈溢出。 6年前关闭。 Improve this qu
什么是最简单的MDX要求? 我想测试我的 MDX 端点是否正确回答了一个非常简单的请求。 在 SQL 中,我会说 SELECT 1; 最佳答案 我想最简单的 MDX 请求是:SELECT FROM c
我正在为我的客户构建一个 BI 仪表板。我们的数据存储在分析服务器多维数据集中。总体来说一切正常,但 smartalec 测试人员决定创建一个名称为 `~!@#$%^&*()_+-=[]{}|;':"
如何在 MDX 查询中添加空白列? 我已经尝试了所有可能的选项,例如添加成员和所有选项,但是当我尝试交叉加入新成员时,出现 MDX 错误。请指导我完成这个。 谢谢 我们需要遵循 MDX 格式并且在 M
我需要从立方体中获取每个州的前 50 个卖家名称 这就是我到目前为止所拥有的 SELECT NON EMPTY ( [DimGeo].[State].[State].ALLMEMBERS * [Mea
在我使用的 OLAP 数据库中,有一个“位置”层次结构,由公司、地区、区域、站点、房间、直到等级别组成。对于一家特定的公司,我需要编写一些 MDX,列出所有地区、区域和站点(但不包括站点以下的任何级别
我有查询在哪里取双值然后是日期 (例如 2020-03) 。 这是它的外观: SELECT NON EMPTY {[Measures].[Revenue]} ON COLUMNS ,NO
我需要仅从 MySQL 中的一个表创建一个 OLAP View 。 我需要从表中的以下列获取信息: 登录备注 登出注 时间戳 用户名 所以我创建了这个蒙德里安模式:
我已经成功地添加了基本的 sum/count/etc.. 简单的度量,但不知道如何添加更复杂的。 让我们假设数据结构表示带有 cargo 的轨道并具有下一个结构: 日期 id_track id_art
在我使用的 OLAP 数据库中,有一个“位置”层次结构,包括公司 -> 区域 -> 区域 -> 站点 -> 房间。我正在使用以下 MDX 来获取公司级别特定成员的所有后代。 DESCENDANTS([
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
icCube 是否提供任何可用于创建具有聚合百分位数(如中位数或第 95 个百分位数)的计算成员的函数? 最佳答案 对于median有可用的 MDX 函数。尚不直接支持百分位,添加看起来是个好主意,但
我是 mdx 新手。 有没有办法像我们在 MySQL 中使用 LIKE '%iphone' AND LIKE '%samsung' 那样使用 MDX 搜索并返回两个关键字的匹配项? 我的 MDXcod
我试图从我的 MDX 选择查询中的维度中过滤掉一些点。我使用了 Filter(, ) 函数,如 http://mondrian.pentaho.com/documentation/mdx.php 中所
我是 Pentaho、Mondrian 和 MDX 的新手。我开始使用 Pentaho CE 5.0.1 作为我的 OLAP 工具。我正在为 MDX 查询而苦苦挣扎,希望有人能就我的问题给我一些建议。
如何以千为单位显示度量值。我会假设这样做如下: FORMAT_STRING="#,," 但是数据返回:10000000.001而我期望:10,000 最佳答案 格式遵循FORMAT_STRING 文档
我们有一个 SSAS 2012 表格模型可供我们使用,我们正在使用 Tableau 进行报告。 目前,我们有一个带有属性 [部门] 的维度 [ Material ]。 我们试图做的是在 DAX 中创建
我是一名优秀的程序员,十分优秀!