Estoy tratando de crear un sitio estático con GatsbyJS y necesito resolver las etiquetas img para que las URL relativas apunten a un directorio determinado, mientras que las absolutas (que comienzan con http(s):// funcionan normalmente).
Intenté crear un componente adecuado, pero como no es una página , Graphql no se ejecutará:
import React from "react" import { graphql } from "gatsby" // Component constants const absUrlRex = new RegExp(/^https?:\/\//, "i") // Component const CustomImg = ({ src, data, ...props }) => { let imgSrc = src if (!absUrlRex.test(src)) { if (null !== data.file) { imgSrc = data.file.publicURL } else { console.log(`Image "${src}" NOT found!`) } } return <img src={imgSrc} {...props} /> } export default React.memo( CustomImg, (prev, next) => next.src === prev.src ) export const query = graphql` query($src: String!) { file ( sourceInstanceName: {eq: "images"}, relativePath: {eq: $src} ) { publicURL } } ` Ya probé StaticImage de " gatsby-plugin-image ", pero el parámetro src no es una cadena estática, por lo que no funciona.
Está ejecutando una consulta de página en un componente. Eso nunca funcionará porque las consultas de página solo funcionan en componentes de nivel superior (páginas), de ahí el nombre.
Debido a que está utilizando un parámetro de filtro GraphQL dinámico ( $src: String! ), usar una consulta estática no es una opción (no aceptan parámetros dinámicos, de ahí el nombre), por lo que su única posibilidad es mover la consulta a un componente de página y desglose el file en el componente como accesorio.