CODEWITHSUNDEEP
javascriptreactjswebpacknext.js
RONE
RONE

Reputation: 5485

Loading .svg files in img tag with nextjs9

Working on Migration project from Nextjs7 to Nextjs9, And could not able to include the .svg files in the image tag.

DEMO : https://codesandbox.io/s/nextjs-mh9fp?fontsize=14&hidenavigation=1&theme=dark

Since it is a exiting project. I want to make the .svg files to work with img tag itself.

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import Head from "next/head";
import RawData from "./static/raw_data.txt";
import SVGFile from "./static/SVGFile.svg";

const App = () => (
  <div>
    <Head>
      <title>Trying out next.js</title>
    </Head>
    <div style={{ background: "green" }}>
      <img src={RawData} />
    </div>

    <div style={{ background: "red" }}>
      <h3>SVG IMAGES Included in img tag NOT LOADING</h3>
      <img src={SVGFile} />{/*Here is the problem*/}
    </div>
  </div>
);

Upvotes: 1

Views: 2348

Answers (1)

felixmosh
felixmosh

Reputation: 35573

Next.js is not support image import by default, you will need to use file-loader.

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.(png|jpe?g|gif|svg)$/i,
      loader: 'file-loader',
      options: {
        outputPath: 'images',
      },
    });
    return config;
  }
};

Upvotes: 2

Related Questions