Картинки сайта Gatsby не отображаются на мобильных устройствах - PullRequest
Новая
       54

Картинки сайта Gatsby не отображаются на мобильных устройствах

0 голосов
/ 11 октября 2019

Я создаю сайт-портфолио с комбинацией Gatsby + Wordpress. Если я запускаю эту настройку локально или на страницах Github, все выглядит нормально при использовании настольного компьютера / ноутбука. Если я захожу на сайт, который публикуется на страницах Github, а просмотр с мобильных устройств вообще не отображается.

Я нашел это решение и добавил его в свой gatsby-node.js следующим образом:

const _ = require(`lodash`)
const Promise = require(`bluebird`)
const path = require(`path`)
const slash = require(`slash`)


// This is the solution I found but it's not working in my case
// ----------
if (process.env.NODE_ENV === "development") {
  process.env.GATSBY_WEBPACK_PUBLICPATH = "/"
}
// ----------

exports.createPages = ({ graphql, actions }) => {
...

Других решений я не нашел, и кажется, что не могу решить сам.

Ссылка на сайт

Ссылка на репо

Надеюсь, я предоставил достаточно информации, чтобы вы могли уловить идею, если не спросите, и я расскажу больше. Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 15 октября 2019

Я получил это, изменив способ запроса изображений. Сначала я использовал, например, это: 

query {
    wordpressWpPortfolio {
     acf {
      portfolio_gallery {
       source_url
       }...

Это привело к неправильному виду URL для изображений. Изображения указывали на мой локальный хост вместо папки внутри моего репозитория.

Я изменил метод запроса следующим образом: 

   query {
    wordpressWpPortfolio {
     acf {
      portfolio_gallery {
       localFile {
        childImageSharp {
         fluid(maxWidth: 500, quality: 100) {
          src
          srcSet
          aspectRatio
          sizes
          base64
         }...

Этот запрос для gatsby-image должен был выполняться вручную, потому что gatsby-config. JS не поддерживает такие фрагменты, как: 

fixed(width: 300, height: 300) {
   ...GatsbyImageSharpFixed
}
0 голосов
/ 12 октября 2019

Эта строка в вашей конфигурации gatsby выглядит так: baseUrl: "localhost:8888/robertsalmi.fi",

Я подозреваю, что плагин Wordpress использует этот префикс для всех изображений, так как ваш живой сайт показывает ихвсе с этим базовым URL. Вам нужно будет предоставить правильную базу, чтобы она могла правильно строить ссылки на изображения.

...