React.js中导入网络图片失败的问题咨询

错误原因 #

import 和 require 是JavaScript模块导入语法，在React项目中，它们用于导入本地模块/资源（比如本地图片）——构建工具（如Webpack）会将这些本地资源处理成可被项目识别的模块。但网络图片是远程资源，服务器返回的是image/jpeg这类图片MIME类型，并非JS模块，所以用模块导入语法加载会触发MIME类型不匹配的报错。

正确做法 #

直接将网络图片的URL字符串赋值给<img>的src属性即可，无需使用import或require：

import React from 'react'
import { useParams } from 'react-router-dom'

function Image() {
   const {width, height} = useParams()
   // 直接定义网络图片URL
   const imageUrl = "https://picsum.photos/id/0/500";
   return (
        <section className="container p-y-3">
            <h1 className="clr-primary">Create Image</h1>
            <h2>{width}</h2>
            <h2>{height}</h2>
            {/* 直接使用变量形式的URL */}
            <img src={imageUrl} alt="示例图片" />
            {/* 也可以直接把URL写在src属性里 */}
            <img src="https://picsum.photos/id/0/500" alt="示例图片" />
        </section>
    );
}

export default Image

动态生成图片URL的场景 #

如果需要根据路由参数动态生成网络图片尺寸，可以直接拼接字符串：

<img src={`https://picsum.photos/id/0/${width}/${height}`} alt="动态尺寸图片" />

内容的提问来源于stack exchange，提问作者Ahmed Abdelbaset