Gatsby -从csv文件中的引用字段生成流体图像宽度ImageSharp
Gatsby是一个基于React的静态网站生成器，它可以帮助开发者快速构建高性能的网站和应用程序。它利用现代化的前端开发技术和优化策略，使得网站加载速度快、内容交互流畅。
从csv文件中的引用字段生成流体图像宽度ImageSharp，可以通过以下步骤实现：
- 解析CSV文件：首先，需要将CSV文件解析为数据结构，例如数组或JSON对象。可以使用相关的JavaScript库或自己编写代码来实现这一步骤。
- 提取引用字段：根据CSV文件的结构，确定包含图像引用的字段，并提取出来。这个字段可能是一个URL或文件路径，用于指向存储图像的位置。
- 下载图像：通过使用适当的网络通信技术，例如HTTP请求，从提取的图像引用中下载图像文件。可以使用各种语言和库来实现这一步骤，例如Node.js的request库。
- 图像处理与转换：使用图像处理库（如Sharp）对下载的图像进行处理和转换，以满足流体图像的需求。可以调整图像的大小、裁剪、压缩等。
- 构建流体图像：借助Gatsby的插件和功能，将处理后的图像嵌入到网站中。可以使用Gatsby的ImageSharp插件来处理图像，并生成适应不同屏幕尺寸的流体图像。
流体图像是指根据设备和浏览器窗口大小动态调整大小和适应布局的图像。这可以提供更好的用户体验，使得网站在不同设备上都能展示出最佳的效果。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：提供可扩展、安全、低成本的对象存储服务，适用于存储大量的图像文件。产品介绍链接：https://cloud.tencent.com/product/cos
请注意，本答案只提供了一个解决方案的概述，并没有具体实施细节。具体实现的方法和工具选择可以根据实际情况和需求进行调整。同时，根据不同的需求和场景，可能还需要进一步优化和调整实现方案。
相关·内容
使用gatsby-transformer-csv和gatsby-transformer-sharp
如果一个CSV文件有一个具有多个图像(带有本地路径)引用的单元格，那么如何让imageSharp处理它们？
id,slug,images
615,prime-click-solid-2,./images/products/PC-019-S1.png, ./images/products/PC-019-S-1.png
浏览 0提问于2020-02-17得票数 1
回答已采纳
我有三个文件夹的图像，将加载在多个旋转木马组件。这里是文件夹结构，我将获得collection文件夹中的所有图像。
src/
images/
collection1/
collection2/
collection3/
randomImage.jpg
randomImage.svg
components/
pages/
我现在有一个查询：
export const pageQuery = graphql`
query IndexQuery {
site {
siteMetadata {
浏览 0提问于2018-05-02得票数 2
2回答
这是Gatsby生成的图像srcset：
<source type="image/webp" srcset="
/static/be21c7dd0d11c74c18530fc39aefa922/10917/mailboxes.webp 200w,
/static/be21c7dd0d11c74c18530fc39aefa922/21f2d/mailboxes.webp 400w,
/static/be21c7dd0d11c74c18530fc39aefa922/fdc6a/mailboxes.webp 800w,
/static/be21c7dd0d11c74c1
浏览 1提问于2019-02-23得票数 3
回答已采纳
我正在使用盖茨比创建一个简单的博客。当我试图搜索特定的图像时，我会从graphql中得到一个错误。以下是我的心声：
安装"gatsby-image": "^1.0.55"
graphql`
query MainLayoutQuery {
heroImage: imageSharp(id: { regex: "/hero.jpg/" }) {
id
sizes(quality: 100) {
base64
tracedSVG
浏览 0提问于2018-08-25得票数 1
回答已采纳
我试着用gatsby-source-sanity和gatsby-image从理智中获取图像。在过去，我没有遇到像这样查询fluid图像资产的问题：
export const query = graphql`
query {
allSanityPicture {
nodes {
image {
asset {
fluid(maxWidth: 900) {
...GatsbySanityImageFluid
}
}
}
浏览 1提问于2021-04-11得票数 2
1回答
我正在尝试从WP中获取一些图像，因为Gatsby还不能与woocommerece一起工作。我下面的插件可以在构建时转换图像并将它们添加到.cache，但它不会在Gatsby graphQl中添加localFile___NODE字段。它似乎根本没有添加任何节点供我使用ImageSharp插件进行查询。Graphql显示它们是在ALLFiles下处理的，而不是在我在Graphql...what中创建的wcProduct节点中处理，这说明这个插件不再创建节点…… const utils = require("./utils")
const fetch = require("
浏览 30提问于2019-04-21得票数 0
1回答
有什么方法可以使导入到.mdx文件中的图像成为流体吗？我有一个基于mdx文件发布的Gatsby站点，我安装了gatsby-remark-image-attributes和gatsby-remark-images。
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
posts: require.resolve("./src/templates/blog-post.js"),
default: require.resolve(&
浏览 2提问于2021-01-19得票数 2
假设我想在Gatsby上的博客上的一篇文章中包含50张图片。使用GraphQL获取图像。我最终为这50个图像中的每一个都编写了非常重复的查询，如下所示：
export const query = graphql`
query ArticleImageQuery {
coverImage: imageSharp(id: {regex: "/cover-image/" }) {
sizes(maxWidth: 700, maxHeight: 525) {
...GatsbyImageSharpSizes
}
},
浏览 3提问于2018-03-24得票数 5
我正在用Gatsby.js开发一个博客
每个帖子都是一个YAML文件，其中有一个用于库的数组，如下所示：
gallery:
-'/uploads/image1.jpg'
-'/uploads/image2.jpg'
-'/uploads/image3.jpg'
-'/uploads/image4.jpg'
-'/uploads/image5.jpg'
在这篇文章中，我有这样的观点：
const images = data.postData.frontmatter.gallery;
return (
{image
浏览 2提问于2019-12-10得票数 2
回答已采纳
我是在Gatsby.js网站上工作，并希望设置图像预处理与盖茨比图像和盖茨比插件-夏普。问题是，我使用的图像有不同的方面率和不同的维度。我想要实现的是自动生成方形流体缩略图。到目前为止，我设法在我的fluid查询中使用了GraphQL，但不幸的是，它对图像进行了调整。我还尝试了fit参数表单 doc，但看起来它是在一段时间前删除的：
image {
relativePath
childImageSharp {
fluid(maxWidth: 320, maxHeight: 320, cropFocus: CENTER) {
...GatsbyImageSharpFl
浏览 1提问于2019-05-16得票数 2
回答已采纳
1回答
我无法在我的盖茨比项目的任何页面上导入图像。我尝试过使用简单的查询和页面查询。
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
function About2({ data }) {
const image = getImage(data.imageSharp.fluid.src)
return (
<section>
<h2>HELLO</h2>
浏览 10提问于2022-04-20得票数 1
我有16个图片，我想渲染到一个网站的网格格式。
为此，我使用了以下插件：
gatsby-image
gatsby-source-filesystem
gatsby-plugin-sharp
gatsby-transformer-sharp
我阅读了文档，据我所知，它只演示了如何查询单个图像。
例如：
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
export default ({ data
浏览 0提问于2019-06-04得票数 19
回答已采纳
我成功地将gatsby-image实现到我的项目中，并替换了我的组件中使用的大量img标记。但是现在我试图为我的一些组件优化背景图像，但我不知道如何优化，因为使用gatsby-image会生成一个新的img标记，而我不能使用它作为一个div元素的背景。可以s1向我展示如何使用生成的图像与css。下面是我的代码：
const HeaderlineSection = ({headerOne}) => {
return(
<div className="header-back" ></div>
)
}
export const quer
浏览 3提问于2018-09-18得票数 4
2回答
我正在使用gatsby初学者博客模板创建一个个人博客。我已经做了一些修改，以增强一些功能，虽然我没有做任何改变的图像处理。
尽管如此，当createPage从标记文件构建日志时，图像似乎并不呈现在页面上。
标记文件映像调用
 
在这里，我正在测试图像是否需要与标记文件相同的文件夹，或者与页面模板相同的文件夹--两者都不起作用。
文件
Gatsby配置
plugins: [
{
resolve: `gatsby-source
浏览 1提问于2020-04-28得票数 2
回答已采纳
我需要在一个组件和gatsby-node.js文件中运行多个graphQL查询。(因为棱镜限制为每个答案20个条目...?) 我尝试了以下方法，看看是否可以在默认函数中创建graphql循环： export default () => {
async function allPosts() {
let data
await graphql(`
query allDitherImages {
prismic {
allProjects(sortBy: meta_firstPublicationDate_DESC) {
浏览 19提问于2020-05-03得票数 1
我使用盖茨比和图形‘m与无头WordPress为一个网站。
我想使用盖茨比图像插件来获得srcSet和模糊效果的图像来自WordPress，但它抛出一个错误的graphiQL操场。下面我想一步一步地解释一下整个过程，以便得到最好的理解。
gatsby图像插件有固定和流畅的：
要在两者之间做出决定，问问自己：“我知道这个图像的确切大小吗？”如果是，这是第一种类型。如果no及其宽度和/或高度需要根据屏幕大小而变化，则为第二种类型。
所以，我需要第二个-流体。
它还具有静态和动态特性。
如果每次使用该组件时都使用相同的图像，例如徽标或头版英雄图像，则可以使用StaticImage组件。如果
浏览 1提问于2021-04-05得票数 3
1回答
我正试图在我的投资组合中建立一个组件，列出我的所有项目，旁边是流动图像(gif)，它们正在工作。我以前在盖茨比v2中使用这个精确的代码创建了这个页面。然而，graphql游乐场表示它无法查询字段"fluid“。我从来没有遇到过这样的问题，而且我很困惑。我已将gatsby图像加载到我的配置中。我正在将盖茨比图像加载到组件中。有人知道如何解决这个问题吗？
import React from "react"
import { Link, useStaticQuery, graphql } from "gatsby"
import projectStyles
浏览 11提问于2022-06-29得票数 -1
最近我开始使用Gatsby，现在我正在尝试使用MDX，在我的MDX文件中，我可以通过GraphQL使用Gatsby，但是我想使用中的静态图像，我收到了这样的错误：
react_devtools_backend.js:2557图像未加载
当我试图在.tsx中实现这个映像时，它可以工作，所以我想知道它是否可能。
gatsby-config
"gatsby-remark-images",
{
resolve: "gatsby-plugin-mdx",
options: {
defaultLayouts: {
浏览 1提问于2021-04-23得票数 7
使用6个Labors ImageSharp 1.0.4作为.Net核心，如何在两点之间画一条线？下面的代码将三个图像组合到GridImage中，然后我想在新图像上画一条线。
当我调用imageContext.DrawLines(linePen, points)时，我得到的是错误：
类型IImageProcessingContext<>是在不引用程序集Sixlabors.ImageSharp的引用中定义的。
但是，我在using语句中引用SixLabors。
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Pixe
浏览 12提问于2021-12-15得票数 0
我正试图从内容丰富的数据获取图像到盖茨比网站。我可以检索文本内容。
我查看了gatsby-image插件文档。看上去很好。
const getBlogList = graphql`
{
blogs: allContentfulBlog {
edges {
node {
id
title
image {
fluid(maxWidth:250) {
...GatsbyContentfulFluid_tracedSVG
}
}
浏览 1提问于2019-06-06得票数 0
我有一个像这样的文件结构：
src
- images
- - blog-images
- - - (various png and jpg files)
- pages
- - blog
- - - (various .md files)
我通过一个模板成功地创建了博客页面。我想不出怎样才能让这些图片出现。我已经包含了gatsby-remark-images，并被gatsby-config.js修改为如下所示：
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`
浏览 13提问于2019-08-10得票数 1
2回答
我有一个用Gatsby版本2制作的页面，我想在一个flexbox容器中用gatsby-image制作组件。当我删除display: flex;属性时，图像就会出现，当容器是flex容器时，图像就会消失。
当我在开发工具中查看Gatsby应用的CSS样式时，我尝试逐个取消选择属性。当我取消选择position: absolute;属性时，图像会出现，但它的大小或位置不正确。
我还尝试在容器上设置flex-direction: column;，这会使两个图像中的第二个图像出现。但是，我更希望这个值是row。
在图像上设置overflow: visible !important;未使图像显示。
im
浏览 40提问于2019-07-08得票数 12
回答已采纳
使用新的gatsby-plugin-image，我很难从理智中获取图片。说要执行以下操作：
import React from 'react'
import {getGatsbyImageData} from 'gatsby-source-sanity'
import {GatsbyImage} from 'gatsby-plugin-image'
const Person = ({data}) => {
const imageData = getGatsbyImageData(data.sanityPerson.profileIma
浏览 2提问于2021-04-10得票数 4
回答已采纳
1回答
我正在尝试用图像数组填充div，使用
fluid{
...GatsbyContentfulFluid
}
除了gatsby拉伸小于div宽度的图像来填充整个空间之外，一切都很好(他应该这样做)，但我的问题是，我是否可以防止这种情况，对于那些图像，使用100%的宽度而不拉伸它们，并且只将流体应用于较大的图像。
但这在满足的情况下不起作用。
有没有简单的解决办法？谢谢
浏览 4提问于2020-09-13得票数 0
所以我用盖茨比源-空气表从我的飞机上提取图像。
在gastby中，我将附件列映射为filenode：
mapping: {'image':fileNode}，
在GraphiQL中，gatsby图像插件似乎正在处理以下查询：
{
airtable(table: {
eq: "table-1"
}, data: {
slug: {
eq: "test-1"
}
}) {
data {
image {
localFiles {
ch
浏览 0提问于2018-10-05得票数 0
回答已采纳
1回答
我在我的SixLabors核心项目中使用ImageSharp和ImageSharp.Web。对于存储在磁盘上的图像的查询字符串，图像大小调整很好。示例：
/myimage.jpg?width=10&height=10&rmode=max
但是，如果图像是从流提供的，ImageSharp似乎不会调整图像的大小。下面是一个示例中间件，如果它符合某些条件，我将使用它从安全文件夹交付图像：
public class ExposeSecureImageMiddleware
{
public ExposeSecureImageMiddleware(RequestDelegate n
浏览 6提问于2019-07-16得票数 1
我有一个使用react hook masonry的Gatsby portfolio，里面有一大堆jpg/gifs/mp4。因为它是以列的形式加载的，所以实际上有一种不受欢迎的卡顿加载，其中图像会相互碰撞并向下推。 我想让jpgs/gifs/mp4在加载时淡入，而不是跳进去推内容，但我不确定该怎么做，我想我需要以某种方式编程宽高比。请注意，我不能每次都使用Gatsby Image来计算纵横比，因为我还使用了与Gatsby Image不兼容的gif和mp4s。 Here's how I'm using graphql调用来自Gatsby的图像，我使用Netlify CMS托管媒体
浏览 12提问于2020-07-24得票数 0
我发现了一个GitHub问题，显示了如何通过将图像的ExifProfile设置为null来删除图像的exif数据：
SixLabors.ImageSharp.Image image = Image.Load(imagePath);
//remove exif
image.Metadata.ExifProfile = null;
//resize
image.Mutate(x => x.Resize(width, height));
//save
SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder encoder
浏览 6提问于2022-02-12得票数 2
回答已采纳
2回答
我正在努力使下面的注册框流体响应CSS。
下面是一个例子：
我希望输入字段的宽度是“灵活的”和收缩取决于页面。
从示例中可以看到，当我缩小窗口时，按钮最终会下降到输入字段下面。
考虑到这一点，我应该把我的输入#iiihuu iiihuu字段宽度设置为，以便允许输入字段优雅地调整大小，而不需要任何颠簸。
非常感谢你的指点:-D
浏览 6提问于2012-07-06得票数 3
回答已采纳
我正在使用本教程中的说明构建一个视差站点：
本教程的演示版本如下：
我不认为有必要包含我自己的代码，因为我认为我忽略了一个大的概念“流体图像”(fluid images )--我理解的是，可以通过在页面上的所有图像中添加一个"max-width:100%“来使图像变得液态。所以img {max-width:100%} .Now理论上应该工作，只要宽度不超过容器的宽度.
因此，回到 ...why的例子，在图像中添加"max-width:100%“不会产生流体图像吗？
我是不是漏掉了一个基本概念？
您可以看到我在这里构建的一个示例站点：
本质上，当你缩小页面时--蛇，以及平行的背景
浏览 3提问于2013-01-22得票数 0
回答已采纳
我已经阅读了有关如何在gatsby.js中创建不同大小的响应式图像的信息
我设法在小型设备上做到了这一点，它工作得很好，但在桌面上，图像不包含在父容器中，并调整了大小，但它显示为全尺寸。
这是我的问题：
export const pageQuery = graphql`
query {
allImageSharp {
edges {
node {
... on ImageSharp {
fluid {
src
}
}
}
浏览 0提问于2018-09-13得票数 2
我正在为一个使用Gatsby和Kentico的网站进行图像优化。我想使用gatsby-image插件，但是gatsby-image不能查询url字段。因此，我需要从另一个节点上的内容管理系统下载这些图像，以便gatsby-image可以查询它们。
我已经尝试过使用另一个插件gatsby-plugin-remote-images来实现这个功能，但是到目前为止还没有成功。我不确定我是否误解了文档。
这是我来自gatsby-config的最新代码
{
resolve: `gatsby-plugin-remote-images`,
options: {
nodeType: 'k
浏览 19提问于2019-04-23得票数 2
1回答
如何在C#中显示此图像
、、、、
我有一个图片，它是grayscale，但是我尝试过的每个库，ImageMagick，ImageSharp，System.Drawing似乎都把它解释为黑白，但是当你在ImageJ、Photoshop、Incarta或许多其他软件中打开它时，你可以清楚地看到它是灰度的。
有人能帮我找到一种方式来显示这个图像吗？这是我试过的东西，但我尝试了差不多十几种不同的东西
TiffEncoder encoder = new TiffEncoder();
encoder.PhotometricInterpretation = SixLabors.ImageSharp.Formats.Tiff.Constant
浏览 7提问于2022-09-27得票数 2
我是Gatsbyjs的新用户。目前我使用此模板。
我的nodejs版本是v16.13.2
我可以"gatsby开发“，但是我认为当我调整存储公共\页面-数据\索引的"page-data.json”中的照片数据时，"gatsby develop“不会启动。
我不知道是什么原因，但我确信当我将一些图像数据添加到公共\img和更改行"coffee.png“在”页面-data.json“时，这种情况发生了.
这是错误信息。有人能教我该修哪一部分吗？
warn Plugin gatsby-plugin-netlify is not compatible with you
浏览 13提问于2022-02-01得票数 1
回答已采纳
我遵循了的Gatsby教程，它工作得很好，但我想要实现的是从静态位置获取图像，而不是使用图像的相对路径。
想要引用像这样的图像(在正面)
featuredImage: img/IMG_20190621_112048_2.jpg
其中IMG_20190621_112048_2.jpg位于/src/data/img中，而不是与/src/posts下的标记文件相同的目录中。
我尝试过像这样设置gatsby-source-filesystem：
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
pa
浏览 1提问于2019-07-22得票数 5
回答已采纳
我从csv文件创建页面。该文件包含一个字段" image“和一个"category”字段，该字段的文件名为/src/images/products/中的图像。 我想创建一个类别页面上的这个类别的所有图像。在gatsby-node.js中，使用以下代码获取不同的类别，以便为每个类别创建一个页面： // Create Categrorie pages from CSV
const resultCategories = await graphql (`
query {
allCsvFile {
dist
浏览 17提问于2019-10-08得票数 0
回答已采纳
我刚开始和盖茨比形象公司合作。
我已经从盖茨比/示例/使用-盖茨比-图像/src/page/获得了示例站点，它使用gatsby开发在本地工作。
接下来有两个步骤：
将Img (和graphql查询)分离到另一个组件，并从blur-up.js中调用该组件--为什么？因为Img和graphql是冗长的，不匹配我目前使用的样式组件(它是内联的).并且它允许下一个步骤发生(步骤2)。
一旦它作为一个组件运行，那么父程序就可以向它传递一些简单的道具(文件名、大小)。这就意味着，只要你想要一个模糊的图像，你就可以把它放在父母身上。
< ImageInsert fsfile="
浏览 5提问于2017-10-17得票数 0
当我下载Gatsby并从文件中删除模板图像时，我会收到错误消息，而服务器无法工作。当我把图像放回去的时候，它又起作用了。我真的不知道这是怎么回事。
为什么不能使用模板没有他们放在那里的图像，它似乎完全打破后，删除图像。
这些是我得到的错误消息：
ERROR #11321 PLUGIN
> icon (src/images/gatsby-icon.png) does not exist as defined in gatsby-config.js.
> Make sure the file exists relative to the root of the site.
ERRO
浏览 1提问于2019-11-27得票数 3
回答已采纳
我正在使用gatsby-transformer-remark在我的GatsbyJs博客中用标记来呈现图像。
我在我的gatsby-config.js文件中使用以下配置：
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 500,
wrapperStyle: `text-decoration: none; back
浏览 0提问于2018-11-16得票数 2
我一直试图设置OpenTK窗口的图标，方法是使用ImageSharp库从设备加载图像，然后将数据转换为字节数组，然后使用WindowIcon方法将其设置为窗口图标。
虽然这确实将图标设置为某些东西，但它看起来并不像它应该有的；它应该是我的猫的滑稽图片。然而，结果是在灰色和粉红色背景上有三条黑色的水平线。
..。
如果有人能帮助我，我们将不胜感激:)
(我使用VisualStudio2019作为我的IDE，当然还有语言C#和.NET框架5.0)
我的代码：
public static byte[] ImageToByteArray(string Icon)
{
浏览 10提问于2022-08-17得票数 0
回答已采纳
1回答
我正在使用以下GatsbyJS启动器：
我正试图在一个像这样的标记文件中呈现一个图像：
标记文件位于contents/docs/templates/use-cases/us-energy-infrastructure.md
图像位于src/images/us-viz.png
结果如下：
控制台和网络选项卡显示请求的图像文件的404错误：
这是我的gatsby-config.js文件的内容：
module.exports = {
siteMe
浏览 7提问于2022-04-12得票数 -1
回答已采纳
1回答
我正在尝试使用mdx文件实现内联图像。 但我不能让它发生，没有图像被加载。 在阅读了some solutions here之后，他们建议在options.plugins的插件数组中也添加gatsby-remark-images，如下所示 `gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-remark-images`,
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
浏览 29提问于2020-09-21得票数 2
我试图减少使用SixLabors ImageSharp生成的图片缩略图(100x75PX)的大小，使用JpegEncoder。然而，尽管使用了质量级别，但是图像在文件大小上似乎并没有太大的变化。
在我的遗留System.Drawing代码中，当我使用ImageCodecInfo编码器和设置为30的Imaging.Encoder.Quality的EncoderParameter时，我会收到很好的低质量图像--大约2k。完美的缩略图。
对于SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder.Quality，无论我将ImageSharp设置为什么，图像总是24
浏览 14提问于2022-02-12得票数 1
回答已采纳
2回答
在引导中，将2列放入非流体容器中
.col-xs-9 / .col-xs-3
如何使该列的背景为左、右边框的全宽度？
我做了这个例子404：
但是width: 75vw;和width: 25vw;并不像我想象的那样起作用。
我怎么才能解决这个问题？
通缉结果：
*橙色容器
*绿色-左列
*蓝-右栏
*深绿色左背景
*深蓝-右底色
我可以补充一下
body {
overflow: hidden;
}
并给出这两列width: 100vw;，但是背景图像内容将位于外部。
浏览 3提问于2016-12-26得票数 0
回答已采纳
我用图像流体制作了一个Gatsby站点，在我的站点上有一个响应式的图像，它在本地开发中工作得很好，当我构建并使用serve在本地部署时，所有的图像都有一个很好的大小。但当它部署在Netlify上时，镜像选择并不是很好，结果是有点模糊。要显示的大小选择正好在好的大小下面。我不知道我能做些什么来修复它。我尝试部署的方式:首先在github上托管我的站点，然后在netlify上拖放我的站点。所以我有点迷路了。
浏览 18提问于2021-05-29得票数 1
回答已采纳
1回答
我正在使用Strapi与盖茨比和有困难的渲染图像在一个动态区域。我正在使用：
Strapi 3.6.2
盖茨比3.5.1
gatsby源-strapi 1.0.0
gatsby插件-图像1.5.0
gatsby插件-锐利3.5.0
gatsby变压器-锐利3.5.0
可以使用GraphQL轻松查询直接在集合类型中找到的顶级图像字段以返回gatsbyImageData，请参阅缩略图字段作为示例：
query MyQuery {
allStrapiPage {
nodes {
Title
Body
thumbnail
浏览 7提问于2021-05-13得票数 15
1回答
我正在使用Gatsby和Strapi开发一个博客应用程序示例。要测试多媒体功能，请执行以下操作：
我创建了一个测试数据集，其中集合类型定义是单个"Name“字段，是多个媒体的字段。
名称：文本，图像：ListMedia
然后，我创建了几个条目，期望使用下面的graphql查询从strapi检索数据：
但是，每个返回的行的publicURL属性都是相同的图像url --第一个上传的图像。因此，web应用程序为所有三种记录显示相同的图像。
基于在线帖子，我怀疑这可能是一个缓存问题，并多次尝试gatsby clean和gatsby develop。然而，这些图像仍在被
浏览 2提问于2020-09-01得票数 0
我试着用和从unsplash加载图像：
gatsby.config.js：
{
resolve: `gatsby-source-unsplash`,
options: {
appId: `${process.env.GATSBY_API_KEY}`,
collections: [
`70643713`
],
// optional: will only get page 1, so increase this count to include > 10 photos
浏览 2提问于2021-04-06得票数 1
回答已采纳
从盖茨比开始并使用。刚刚更新到v3和最新的gatsby插件和Just：
错误#11321插件
"gatsby-node.js“在运行createPages生命周期时抛出了一个错误：
接口字段ContentfulReference.contentful_id期望输入字符串！但是ContentfulAsset.contentful_id是类型字符串。
在gatsby-node.js中是：
createTypes(`
interface ContentfulReference {
contentful_id: String!
id: ID!
}
`);
c
浏览 0提问于2021-09-18得票数 0
1回答
在我的网页上，我使用一些响应图像(使用引导5 img-流体类)。在CSS中，我刚刚定义了宽度: 100%用于它，因为它是响应的，所以我不能将width和height添加到img标记本身。
然而，然后W3C验证器和SEO工具，PageInsights等产生的图像没有宽度和高度定义。
当然，如果我尝试将图像固定大小添加到img标签中，它将保持不变，不再响应。
是否有任何建议来验证和保持响应，可能不删除引导img-流体类？
浏览 6提问于2022-05-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
