React Canvas加载网络图片正常，本地图片报GET错误求解决

问题原因 #

React项目里，public文件夹是静态资源的根目录，构建后该文件夹下的所有文件会被放到项目根路径。使用../public/vercel.svg这类相对路径时，实际请求的路径会基于组件所在目录（比如src/components），导致服务器找不到对应资源，从而抛出GET错误。

可行解决方案 #

方案1：直接使用根路径访问public中的图片 #

将本地图片路径改为以/开头的根路径，因为public下的资源在运行时直接处于根目录：

const image = new Image()
// 用/开头的路径指向public下的文件
image.src = "/vercel.svg"

方案2：通过import导入图片资源 #

利用webpack的模块打包能力，先导入图片再使用，这种方式会自动处理路径：

import React, { useRef, useEffect } from "react";
// 导入本地图片
import vercelLogo from '../public/vercel.svg';

const Canvas = (props) => {
    const canvasRef = useRef(null)
    useEffect(() => {
        const image = new Image()
        // 使用导入的图片变量作为src
        image.src = vercelLogo
        
        const canvas = canvasRef.current
        const context = canvas.getContext('2d')
        context.fillStyle = "#000000"
        context.fillRect(0, 0, context.canvas.width, context.canvas.height)
       
        // 建议先设置onload再赋值src，避免缓存导致onload不触发
        image.onload = () => {
            context.drawImage(image, 0, 0)
        }
    }, [])
    return <canvas ref={canvasRef} {...props} width={288} height={480} />
}

export default Canvas

额外注意点 #

• 优先设置image.onload事件再赋值image.src，避免图片已被浏览器缓存时，onload事件无法触发的问题。
• 如果图片放在src目录下，必须通过import方式导入，不能直接用根路径访问。

内容的提问来源于stack exchange，提问作者risky last