CODEWITHSUNDEEP
javascriptreactjs
Ahmed Abdelbaset
Ahmed Abdelbaset

Reputation: 4786

faild to load image in react.js

I am tring to add image to react project. I use import image from "./ImageSource"

When i import a local image like

import image from "./path/to/image.jpg";
...
return <img src={image} />

It appeare successfully.

But when i try to import image with link like "https://picsum.photos/id/0/500" It doesn't work with error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg". Strict MIME type checking is enforced for module scripts per HTML spec.
__________________________________
Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://i.picsum.photos/id/0/1000/1000.jpg?hmac=2UP1ceqLjSmxh6sZh1wmL6yWx3nIMPvw2_b0ugpOv1o

this is my code:

import React from 'react'
import { useParams } from 'react-router-dom'
import image from "https://picsum.photos/id/0/500";

function Image() {
   const {width, height} = useParams()
   return (
        <section className="container p-y-3">
            <h1 className="clr-primary">Create Image</h1>
            <h2>{width}</h2>
            <h2>{height}</h2>
            {/* The problem here */}
            <img src={image} alt="" />
            <img src={require("https://picsum.photos/id/0/500")} />
        </section>
    );
}

export default Image

How can i import image from link?

Upvotes: 0

Views: 280

Answers (1)

Ahmed Abdelbaset
Ahmed Abdelbaset

Reputation: 4786

I found the solution.

When rendering a remote image, there is no need to import it (As @Andy mentioned in the comments). It can be put directly into the src prop

<img src="https://picsum.photos/id/10/1000"

Upvotes: 1

Related Questions