gatsby-image 插件不支持网络图片吗？

[tgy3300]

gatsby-image 插件不支持网络图片吗？比如图片地址为 https://www.aaa.com/g.jpg 的，怎么在gatsby-image插件中显示

[jonniebigodes]

@tgy3300 if you don't mind please use english as a language for the issues you're experiencing with Gatsby. As for instance google translator will help out non native speaking people, but there's always something lost in the translation and to avoid a miscomunication it would be better to go that route. Also to help out in your issue, fill the issue template with the information present if you don't mind. Feel free to make the adjustments i mentioned so that we can help you better.

[polarathene]

As for instance google translator will help out non native speaking people, but there's always something lost in the translation and to avoid a miscomunication it would be better to go that route.

That doesn't really help if English isn't a language they're confident in, if they end up going with translate themselves to get English. Including both would be better if they're unable to communicate fluently in english.

---

要从“gatsby-image”中受益，您必须提供所需的数据，或者在构建时处理图像。
To benefit from gatsby-image you must provide the data it needs, or process the image at build time.

您可以通过以下插件使用https://www.aaa.com/g.jpg 等远程图像网址：https://www.gatsbyjs.org/packages/gatsby-plugin-remote-images/
You can use a remote image URL like https://www.aaa.com/g.jpg via a plugin like this: https://www.gatsbyjs.org/packages/gatsby-plugin-remote-images/

Fluid data example:

{
  aspectRatio: 0.9025270758122743,
  base64: "data:image/webp;base64,UklGRpIAAABXRUJQVlA4IIYAAAAwBACdASoUABYAPtFYokuoJSMhsBgMAQAaCWQApzyAATMYqzoy6WJHiIAA/u6WPLuQDe/zBWkk7EpQbTMyrGOzrMSlCt4JXigacYvXZAUEEkrKqVuD4yIy3FBygVx0hpXe48+iuQxgEyWU0M3WpHVbhRNMgtHY83tNHv/5Gsjx83gcpUgAAA==",
  sizes: "(max-width: 500px) 100vw, 500px",
  src: "/static/99eef364a067f7c0632d816832929955/018a8/printExample.jpg",
  srcSet: "/static/99eef364a067f7c0632d816832929955/4600d/printExample.jpg 125w,↵/static/99eef364a067f7c0632d816832929955/fdf47/printExample.jpg 250w,↵/static/99eef364a067f7c0632d816832929955/018a8/printExample.jpg 500w",
  srcSetWebp: "/static/99eef364a067f7c0632d816832929955/3de86/printExample.webp 125w,↵/static/99eef364a067f7c0632d816832929955/04576/printExample.webp 250w,↵/static/99eef364a067f7c0632d816832929955/67857/printExample.webp 500w",
  srcWebp: "/static/99eef364a067f7c0632d816832929955/67857/printExample.webp"
}

这些数据可以通过gatsby-transformer-sharp使用GraphQL查询从gatsby-image-sharp生成。 直接使用远程URL没有多大好处，需要下载和处理，否则使用常规的img元素。

That data can be generated from gatsby-image-sharp with GraphQL queries via gatsby-transformer-sharp. There is not much benefit to using a remote URL directly, it will need to be downloaded and processed, otherwise use regular img element.

[nihgwu]

@polarathene you are so kind and helpful, I'd say the question is really simple in English, he just don't do that way which is really unfriendly for the others. As for the question, I think the plugin you provided is not he wanted, that plugin actually downloads remote images and generate data for gatsby-image, a simple img tag would solve the problem as that's for arbitary remote images

[polarathene]

a simple img tag would solve the problem as that's for arbitary remote images

Well yes... but then why would he ask about gatsby-image, assuming he wanted the features/benefits?

The plugin I linked to allows you to list the URL you want to use in that case. But maybe you are right and the user misunderstand how gatsby-image work.

I'd say the question is really simple in English, he just don't do that way which is really unfriendly for the others.

If you are not confident about a foreign language, it can be scary/embarrassing to try ask. My chinese vocabulary is quite small(I used Google translate above, it's probably inaccurate), I can relate to how it can be difficult to know if I am saying something correctly, it can be easier to express in native language.

That said, they should include a translation too, as English is the primary language here.

[nihgwu]

That said, they should include a translation too, as English is the primary language here.

BIG 👍 for this, BTW my native langugage is Chinese 😬 , I use the dictionary now and then to make sure my expresion be understood and words are correct(I hope so 😂)

Regarding the question, I guess he would suppose gatsby-image is the recommended way to display images in Gatsby, and I find that people tends to forget the primitive way to achive the goal when using a framework

From my understanding, if you want to make use gatsby-image with remote images, you have to prepare a lot of props like scrSet which is not available for remote images, and it would be better and easier to write your own image component for optimization purpose

[tgy3300]

为什么要这样问，就是我觉得使用gatsby-image插件在网页上加载图像，页面会快很多，且浏览体验效果也挺好，img标签就是没有像gatsby-image一样的体验

[nihgwu]

那很好， @polarathene 提供的插件就能满足你的需求，build的时候把对应的图片下载下来变成本地图片再处理，要么机自己写一个图片组件来实现类似的功能，gatsby-image最好的应用场景是本地图片

还有，我觉得你这样做非常非常不尊重热心回答你问题的人，你可以几秒钟就写出一段话，可能别人需要几分钟甚至更长的时间去找工具翻译理解你的意思，Gatsby的社区气氛是真的好，我之前就注意到你的好几个问题都是不懂中文的人耐心的回答

per @polarathene 's suggestion, I try to translate the above sentences into English for better understanding the full context

That's fine, the plugin @polarathene mentioned should work for your purpos, which will download the remote images to local while building and then gatsby-image could consume from, or you could create a image component to meet you purpose, gatsby-image is designed to work with local images

Secondly, I think what your are doing is REALLY disrespectful to the others who try to help you, you could write a sentence in seconds, but the others would spend minites to understand you question or description with the help of translation tools, the Gatsby community is great, I have noticed there are someone speek no Chinese are trying to help you in patience

[polarathene]

Why do you want to ask this question, that is, I think that using the gatsby-image plugin to load images on a web page, the page will be much faster, and the browsing experience is also very good, the img tag is no experience like gatsby-image.

@tgy3300 yes that is what makes gatsby-image good. But it requires the image downloaded to process data. Use the plugin I linked, or download the image manually to query with GraphQL and use with gatsby-image.

If you have not used gatsby-image before, try example project gatsby new in terminal.

@ tgy3300是的，这就是让'gatsby-image变好的原因。 但它需要下载的图像处理数据。 使用我链接的插件，或手动下载图像以使用GraphQL查询并与gatsby-image`一起使用。

如果您之前没有使用过gatsby-image，请在终端中尝试示例项目gatsby new。

[polarathene]

BIG :+1: for this, BTW my native langugage is Chinese :grimacing: , I use the dictionary now and then to make sure my expression be understood and words are correct(I hope so :joy: )

@nihgwu Oh, I wasn't sure, your English is 真棒! 谢谢 for making the effort :smiley:

I find that people tends to forget the primitive way to achive the goal when using a framework

That make sense!

if you want to make use gatsby-image with remote images, you have to prepare a lot of props like scrSet which is not available for remote images

I have a project that uses that remote plugin I think, and it worked well. Images download and get processed like local ones, and queried via GraphQL. When I was in China(ChongQing), sometimes the images did not download in full, 130MB from Unsplash website. I used Netlify to download the images when it built the site which worked well.

[nihgwu]

@polarathene haha, I'm not saying the plugin doesn't work, I just want to clarify that the plugin actually downloads the images, so you are working with local images indeed, I said that you have to prepare the props is based on the assuption that you want to use the remote images directly