Javascript 如何使用Webpack将png图像添加到JS?
我正在制作一个HTML5游戏。我使用的是一个使用Webpack的样板文件。 我一直在尝试将本地文件夹中的png图像添加到js文件中,但不断出现以下错误:Javascript 如何使用Webpack将png图像添加到JS?,javascript,html,webpack,Javascript,Html,Webpack,我正在制作一个HTML5游戏。我使用的是一个使用Webpack的样板文件。 我一直在尝试将本地文件夹中的png图像添加到js文件中,但不断出现以下错误: GEThttp://localhost:3000/alien.png 404(未找到)和未捕获的DomeException:未能在“CanvasRenderingContext2D”上执行“drawImage”:提供的HtmlImage元素处于“断开”状态。 我在canvas.js文件中使用的代码如下: let alienImg = new I
GEThttp://localhost:3000/alien.png 404(未找到)
和未捕获的DomeException:未能在“CanvasRenderingContext2D”上执行“drawImage”:提供的HtmlImage元素处于“断开”状态。
我在canvas.js
文件中使用的代码如下:
let alienImg = new Image();
alienImg.src = 'alien.png';
c.drawImage(alienImg, 300, 300)
我试图将图像放到画布上的方式是否做错了,或者它是否在我的webpack.config.js文件中
网页包文件如下,仅供参考:
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.html$/,
loader: 'html-loader?attrs[]=video:src'
},
{
test: /\.mp4$/,
loader: 'url-loader?limit=10000&mimetype=video/mp4'
},
{
test: /\.png$/,
loader: "url-loader?mimetype=image/png"
}
]
},
有人能帮我吗?提前谢谢你 使用时:
alienImg.src = 'alien.png';
您正在为图像提供一个指向该图像的url,该url可能不存在于该路径中(假设它为您提供了一个404)
我想你想做的是
import alienImage from './alien.png';
然后你可以使用
alienImg.src = alienImage;
这样做的目的是在webpack打包并公开公共资源之后,为您提供正确的图像位置URL 我只是使用了:html2Canvas
import html2canvas from 'html2canvas';
我希望这能在某种程度上有所帮助。如果是,快乐的日子。:)
html2canvas(document.querySelector(selector)).then(canvas => {
console.log(canvas);
document.body.appendChild(canvas)
canvas.setAttribute('downloads', 'nameOfImage.png')
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = image
});