Cannot use SVG-Files

[ghost]

Hi, thanks for your plugin...

when i try this:

img alt="logo" src={require('../static/logo_white.svg')} className="welcomePageWelcomeInnerLogo" />

i get this issue:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <?xml version="1.0" encoding="UTF-8"?>
| <svg width="1254px" height="279px" viewBox="0 0 1254 279" xmlns="http:https://www.w3.org/2000/svg" xmlns:xlink="http:https://www.w3.org/1999/xlink" version="1.1">
|  <!-- Generated by Pixelmator Pro 1.1.4 -->

How can i solve the issue? My next.config.js looks like this:

//const withImages = require('next-images');
const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

module.exports = withPlugins([
    [optimizedImages, {
      /* config for next-optimized-images */
    }],
    withCSS()
  ]);

Another question... i have a backgroundImage as .jpg file. I set this Image as BackgroundImage with CSS like this:

const setbgImage = {
    backgroundImage: `url('../static/background.jpg')`
};

How can i use this with the fowolling example to use webp?

picture>
    <source srcSet={require('./images/my-image.jpg?webp')} type="image/webp" />
    <source srcSet={require('./images/my-image.jpg')} type="image/jpeg" />
    <img src={require('./images/my-image.jpg')} />
  </picture>

[ghost]

I fixed the issues. I had a mistake in my next.config.js file

[cyrilwanner]

Hi @ITforHome
Cool that you could solve it already 👍

Regarding your other question about the webp fallback for css: That is a bit more complicated. You could simply use the same require statement (url(${require('../static/background.jpg?webp')})) but you don't have a fallback then for older browsers. I suggest to read this article if you plan on implementing it: https://css-tricks.com/using-webp-images/#article-header-id-4
It looks like CSS doesn't provide this and you have to go with a check in JS if the current browser supports webp or not and choose the image depending on that.