gatsby: [gatsby-source-wordpress] SVG images are not shown in grahpiql

Description

I use gatsby-source-wordpress to load data from wordpress to my front-end. The issue are the images with SVG mime type. When i have jpg or png images all is working fine, but if the image is svg format it is shown in grahiql or null.

Steps to reproduce

  1. create any wordpress site and install gatsby-source-wordpress
  2. create repeater with acf, and have only images there
  3. create 2 fields in this repeater. 1 with png image and 1 with svg image

If in the repeater are images with png or jpg format, then in graphiql will be shown image field. But svg images will be null. If there will be all svg images, then graphiql will not show an image (= if image has “image” key to show in graphiql will not exist in graphiql).

https://www.html-factory.cz/ - white 2. section with numbers has 3 svg images. These images are not shown in graphiql.

Expected result

I need to have at least url of that svg. Or better have local file wich i will but instead of gatsby-image.

Actual result

gatsby-image will throw an error. Cant get any svg images from wordpress uploaded media library.

Snímek obrazovky 2019-07-05 v 15 44 47

Environment

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        defaultQuality: 90,
      },
    },
    "gatsby-plugin-offline",
    `gatsby-plugin-sass`,
    {
      resolve: "gatsby-source-wordpress",
      options: {
        /*
         * The base URL of the Wordpress site without the trailingslash and the protocol. This is required.
         * Example : 'gatsbyjsexamplewordpress.wordpress.com' or 'www.example-site.com'
         */
        baseUrl: "www.example.com",
        // The protocol. This can be http or https.
        protocol: "https",
        // If useACF is true, then the source plugin will try to import the Wordpress ACF Plugin contents.
        // This feature is untested for sites hosted on wordpress.com.
        // Defaults to true.
        useACF: true,
        // Set verboseOutput to true to display a verbose output on `npm run develop` or `npm run build`
        // It can help you debug specific API Endpoints problems.
        verboseOutput: false,
        // Set how many pages are retrieved per API request.
        perPage: 100,
        // Set WP REST API routes whitelists
        // and blacklists using glob patterns.
        // Defaults to whitelist the routes shown
        // in the example below.
        // See: https://github.com/isaacs/minimatch
        // Example:  `["/*/*/comments", "/yoast/**"]`
        // ` will either include or exclude routes ending in `comments` and
        // all routes that begin with `yoast` from fetch.
        // Whitelisted routes using glob patterns
        includedRoutes: [
          "**/pages",
          "**/blog",
          "/yoast/**",
          "**/media",
          "**/category",
          "**/menus",
          "**/comments",
        ],
        // use a custom normalizer which is applied after the built-in ones.
        normalizer: function({ entities }) {
          return entities
        },
      },
    },
  ],
}

package.json

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "bootstrap": "^4.3.1",
    "gatsby": "^2.1.18",
    "gatsby-image": "^2.0.30",
    "gatsby-plugin-google-analytics": "^2.0.14",
    "gatsby-plugin-manifest": "^2.0.19",
    "gatsby-plugin-offline": "^2.0.24",
    "gatsby-plugin-react-helmet": "^3.0.7",
    "gatsby-plugin-sass": "^2.0.10",
    "gatsby-plugin-sharp": "^2.0.23",
    "gatsby-source-filesystem": "^2.0.23",
    "gatsby-source-wordpress": "^3.0.40",
    "gatsby-transformer-sharp": "^2.1.15",
    "node-sass": "^4.11.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-helmet": "^5.2.0",
    "react-html-parser": "^2.0.2",
    "reactstrap": "^7.1.0"
  },
  "devDependencies": {
    "prettier": "^1.16.4"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 15 (3 by maintainers)

Most upvoted comments

Same problem here. My workaround is to add a file field in acf en source the SVG from here.