Image tag not working inside the jsx (React-template)

[prasoon0909]

I am trying to insert my brand logo inside react component using image tag but it doesn't seems to be working although i can see image tag in the element section of chrome dev tool.

import React from "react";
import "./style.css";

export default function Home() {
  return (
    <div className="home-div">
      <image
        width="500"
        class="home-image"
        alt="ImageKit.io"
        src="https://raw.githubusercontent.com/imagekit-developer/imagekit-javascript/master/assets/imagekit-light-logo.svg"
      />
      <h1 className="home-heading">Connect to Imagekit</h1>
      <sp-button class="home-button">Next</sp-button>
      <p className="home-info">
        This step opens a window where you can securely enter your Imagekit
        credentials, which will enable Adobe PhotoShop to access your Imagekit
        account.
      </p>
    </div>
  );
}

What this renders to :-

weppack.config.js

const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        //libraryTarget: "commonjs2"
    },
    devtool: 'eval-cheap-source-map', // won't work on XD due to lack of eval
    externals: {
        uxp: 'commonjs2 uxp',
        photoshop: 'commonjs2 photoshop',
        os: 'commonjs2 os'
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    plugins: [
                        "@babel/transform-react-jsx",
                        "@babel/proposal-object-rest-spread",
                        "@babel/plugin-syntax-class-properties",
                    ]
                }
            },
            {
                test: /\.png$/,
                exclude: /node_modules/,
                loader: 'file-loader'
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins: [
        //new CleanWebpackPlugin(),
        new CopyPlugin(['plugin'], {
            copyUnmodified: true
        })
    ]
};

[dennismoha]

Have you tried including permission for that link in the manifest.json? I see you are using a network link for the image.