时间戳

首页 > 解决方案 > 无法使用相对路径设置画布图像

reactjs - 无法使用相对路径设置画布图像

问题描述

我有一个画布，我希望它在页面加载时有一个默认图像。这是我的组件的样子：

import React from 'react';
import './css/canvas.css';

function Canvas() {

    window.onload = () => {
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        var img = new Image();
        img.src = '../photos/PNGbackground.png';
        img.onload = function () { 
            ctx.drawImage(img, 0, 0);
        }
    }

    return (
        <>
            <div className="canvContainer">
                <canvas className="canv" id="canvas"></canvas>
            </div>
        </>
    )
}

export default Canvas;

我的问题是图像没有出现在画布上。我也尝试以这种方式给出路径：

img.src = window.location.href + 'src/photos/PNGbackground.png';

当我 console.log 时，这给了我这条路径img

src="http://localhost:3000/src/photos/PNGbackground.png"

但是图像仍然没有出现。这是 src 我的文件夹的结构：

我该如何解决这个问题？谢谢。

标签： reactjs

解决方案

第一张导入图片

import PNGbackground from '../yourpath/src/photos/PNGbackground.png'; //Please be careful about image path It should be correct as per your image directory.

然后使用PNG背景，如下所示

img.src = PNGbackground;

推荐阅读