时间戳

首页 > 解决方案 > 为什么外部链接中的图像在 gatsby 中不起作用？

node.js - 为什么外部链接中的图像在 gatsby 中不起作用？

问题描述

对不起，请，我只是在学习。在某些 gatsby 模板中，我可以将其作为图像插入——来自 URL 的图像，而在某些模板中，图像不想显示它。

它取决于什么以及如何编辑代码以使 url 工作？（我对graphql的了解相当基础）

这是博客模板的代码：

/** @jsx jsx */
import { jsx } from 'theme-ui'
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import { RiArrowRightLine, RiArrowLeftLine } from "react-icons/ri"

import Layout from "../components/layout"
import SEO from '../components/seo';

const styles = {
  'article blockquote': {
    'background-color': 'cardBg'
  },
  pagination: {
    'a': {
      color: 'muted',
      '&.is-active': {
        color: 'text'
      },
      '&:hover': {
        color: 'text'
      }
    }
  }
}

const Pagination = (props) => (
  <div 
    className="pagination -post"
    sx={styles.pagination}
  >
    <ul>
        {(props.previous && props.previous.frontmatter.template === 'blog-post') && (
          <li>
              <Link to={props.previous.frontmatter.slug} rel="prev">
                <p
                  sx={{
                    color: 'muted'
                  }}
                >
                  <span className="icon -left"><RiArrowLeftLine/></span> Previous</p>
                <span className="page-title">{props.previous.frontmatter.title}</span>
              </Link>
          </li>
        )}
        {(props.next && props.next.frontmatter.template === 'blog-post') && (
          <li>
            <Link to={props.next.frontmatter.slug} rel="next">
              <p
                sx={{
                  color: 'muted'
                }}
              >Next <span className="icon -right"><RiArrowRightLine/></span></p>
              <span className="page-title">{props.next.frontmatter.title}</span>
            </Link>
          </li>
        )}
    </ul>
  </div>
)

const Post = ({ data, pageContext }) => {
  const { markdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html, excerpt } = markdownRemark
  const Image = frontmatter.featuredImage ? frontmatter.featuredImage.childImageSharp.fluid : ""
  const { previous, next } = pageContext

  let props = {
    previous,
    next
  }

  return (
    <Layout className="page">
      <SEO
        title={frontmatter.title}
        description={frontmatter.description ? frontmatter.description : excerpt}
        image={Image}
        article={true}
      />
      <article className="blog-post">
        <header className="featured-banner">
          <section className="article-header">
            <h1>{frontmatter.title}</h1>
            <time>{frontmatter.date}</time>
          </section>
          {Image ? (
            <Img 
              fluid={Image} 
              objectFit="cover"
              objectPosition="50% 50%"
              alt={frontmatter.title + ' - Featured image'}
              className="featured-image"
            />
          ) : ""}
        </header>
        
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      </article>
      {(previous || next) && (
        <Pagination {...props} />
      )}
    </Layout>
  )
}

export default Post

export const pageQuery = graphql`
  query BlogPostQuery($id: String!) {
    markdownRemark( 
      id: { eq: $id }
    ) {
      id
      html
      excerpt(pruneLength: 148)
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
        description
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
              ...GatsbyImageSharpFluid
              ...GatsbyImageSharpFluidLimitPresentationSize
            }
            sizes {
              src
            }
          }
        }
      }
    }
  }
`

典型帖子：

---
template: blog-post
title: my title
slug: /plant/bud
date: 2020-05-13 12:37
description: abc
featuredImage: /assets/screen-post-hixmjdah9xhoo-unsplash.jpg (but online image from imgurl png doesnt work)
---


post nr 1

已编辑 ///

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/static/assets/`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/content/`,
        name: `content`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        gfm: true,
        plugins: [
          netlifyCmsPaths,
          `gatsby-remark-reading-time`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1024,
              showCaptions: true,
              linkImagesToOriginal: false,
              tracedSVG: true,
              loading: "lazy",
            },
          },
          `gatsby-remark-responsive-iframe`,
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: "language-",
              inlineCodeMarker: null,
              aliases: {},
              showLineNumbers: false,
              noInlineHighlight: false,
              // By default the HTML entities <>&'" are escaped.
              // Add additional HTML escapes by providing a mapping
              // of HTML entities and their escape value IE: { '}': '&#123;' }
              escapeEntities: {},
            },
          },
        ],
      },
    },

标签： node.jsreactjsgraphqlgatsby

解决方案

在 Gatsby 中，您可以使用具有以下属性的标准 HTML<img>标记从外部来源插入图像：src

<img src="https://via.placeholder.com/150" alt="Alt text" width="500" height="600">

如果你想保持gatsby-image跨外部（或在线）图像的好处，你应该需要使用一些依赖来实现延迟加载和其他功能。

但是，要使用，您需要gatsby-image允许 Gatsby 和推断的 GraphQL 模式在文件系统gatsby-transformer-sharp（可查询的 GraphQL 模式，将与.gatsby-plugin-sharpgatsby-source-filesystemgatsby-image

此外，您需要指定这些图像所属的项目文件夹（设置文件系统）：

const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

一旦设置了文件系统并处理了图像，就会创建一个 GraphQL 节点，并且您可以使用您提供的片段：

featuredImage {
  childImageSharp {
    fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
      ...GatsbyImageSharpFluid
      ...GatsbyImageSharpFluidLimitPresentationSize
    }
    sizes {
      src
    }
  }
}

由于 Gatsby 无法直接处理外部图像，因此无法与gatsby-image. 根据这些图像的来源，某些插件允许您继续使用gatsby-image外部资源（通常来自Contentful等 CMS）。

您可以在使用图像文档中查看更多文档。

更新 (01/06/2021)

在上一个Gatsby 版本（v2.30）中，他们添加了一个新的实验性功能，仍处于测试阶段以支持组件中的外部图像<StaticImage>。要启用它，只需升级到最新的 Gatsby 版本（通过npm或yarn）并在运行脚本中添加以下标志：

GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby develop

GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby build

然后，您可以将绝对 URL 传递给StaticImage：

<StaticImage src="https://placekitten.com/400/400" alt="Kittin" />

推荐阅读