Imágenes en línea de Gatsby Markdown.

15 Jul, 2023 Programación 0

Estoy tratando de descubrir cómo renderizar mis imágenes en línea en mi publicación de blog. Tengo una imagen destacada en la parte superior que funciona, pero no puedo descubrir cómo obtener imágenes en línea.

Las imágenes se almacenan en src/images/

office-upgrade.md

“`md

título: “Mejora de la oficina”
imagen: ../images/office1.jpg
destacado: falso
autor:
nombre: “jrock2004”
fecha: “2017-08-06”
etiquetas:

– general

Así que, cuando me mudé a nuestra nueva casa hace 3 años, mi único requisito era tener mi propia oficina. En mi casa anterior, estaba atrapado en el sótano. Cuando hacía videos, recibía bromas sobre vivir en el sótano de mi madre. Como puedes ver, todos los cables estaban por todas partes. Era simplemente horrible.

“`

Gatsby-config.md

js complementos: [ 'gatsby-plugin-postcss', { resolver: gatsby-plugin-mdx, opciones: { extensiones: [.mdx, .md], }, }, 'gatsby-plugin-image', 'gatsby-plugin-sharp', 'gatsby-transformer-sharp', { resolver: 'gatsby-source-filesystem', opciones: { nombre: 'images', ruta: ${__dirname}/src/images/, }, __clave: 'images', }, { resolver: 'gatsby-source-filesystem', opciones: { nombre: 'pages', ruta: './src/pages/', }, __clave: 'pages', }, { resolver: gatsby-transformer-remark, opciones: { complementos: [ { resolver: gatsby-remark-images, opciones: { maxWidth: 800, }, }, ], }, }, { resolver: 'gatsby-source-filesystem', opciones: { nombre: 'posts', ruta: ${__dirname}/src/posts/, }, __clave: 'posts', }, ],

component/post/index.tsx

tsx <artículo className={markdown mt-12 mx-auto ${imagen && 'w-11/12'}}> <MDXProvider componentes={componentes}> <MDXRenderer>{cuerpo}</MDXRenderer> </MDXProvider> </artículo>

Cuando miro el DOM, esto es lo que se renderiza

html <img src="images/office2.jpg" alt="Pesadilla de gestión de cables">

¿Qué estoy haciendo mal aquí?

import { MDXProvider } from "@mdx-js/react" import { Img } from "gatsby-image" const components = { // otros componentes aquí img: Img, } const Post = ({ data }) => { const { body, frontmatter } = data.mdx const { title, image } = frontmatter return ( <article classname="{`markdown" mt-12="" mx-auto="" ${image="" &&="" 'w-11/12'}`}=""> <mdxprovider components="{components}"> <mdxrenderer>{body}</mdxrenderer> </mdxprovider> </article> ) } export default Post

Answer

davy.ai

July 15, 2023 at 9:59 pm
Según el código proporcionado, parece que estás utilizando gatsby-transformer-remark para renderizar contenido en Markdown y gatsby-remark-images para procesar y optimizar imágenes dentro del Markdown. Para que las imágenes en línea se muestren correctamente en tus publicaciones de blog, es posible que desees asegurarte de utilizar la sintaxis correcta en tu Markdown.

La siguiente sintaxis debería funcionar para las imágenes en línea:
```
![Texto alternativo](../images/nombre-de-la-imagen.jpg)
```
Asegúrate de que la ruta de la imagen sea correcta y que ../images/ sea la ruta relativa correcta desde tu archivo Markdown.

Además, asegúrate de estar pasando los componentes correctos a MDXProvider en tu archivo post/index.tsx. Puede que desees verificar que los componentes de MDXProvider incluyan un componente para renderizar imágenes, como Img de gatsby-image.
```
import { MDXProvider } from "@mdx-js/react"
import { Img } from "gatsby-image"

const components = {
  // otros componentes aquí
  img: Img,
}

const Post = ({ data }) => {
  const { body, frontmatter } = data.mdx
  const { title, image } = frontmatter

  return (
    <article classname="{`markdown" mt-12="" mx-auto="" ${image="" &&="" 'w-11/12'}`}="">
      <mdxprovider components="{components}">
        <mdxrenderer>{body}</mdxrenderer>
      </mdxprovider>
    </article>
  )
}

export default Post
```
Esto debería permitirte mostrar imágenes en línea utilizando gatsby-image dentro de tus publicaciones de blog en Markdown.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?