nodejs의 webpack dev 서버를 사용하여 이미지를로드 할 수 없습니다.

Question

안녕하세요. 다음 코드를 사용하여 내 게임의 배경을 그리는 중입니다.하지만 실패 메시지가 계속 표시되는데 왜 이런 일이 발생하는지 알 수 없습니다.

이 내 main.js입니다 :

this.background = new Image(); 

var context = document.getElementById('canvas').getContext('2d'); 

var loaded = false; 

var drawBackground = function() { 

    loaded = true; 

    var pattern = context.createPattern(this.background, 'repeat'); 
    context.fillStyle = pattern; 
    context.fillRect(0, 0, 10000, 10000); 
} 

this.background.onload = drawBackground; 
this.background.src = "../images/bg.jpg"; 

setTimeout(function() { 
    if (loaded) { 
    console.log('success'); 
    } else { 
    console.log('falilure'); 
    } 
}, 3000); 

내 파일 디렉토리 구조는 다음과 같습니다 : 나는 ./static/bg.jpg-this.background.src 변경 시도

- dist 
    - static 
    - bg.jpg 
    - bundle.js 
- images 
    - bg.jpg 
- src 
    - main.js 
- server.js 

하지만 여전히 작동하지 않습니다.

npm run dev 명령을 사용하여 webpack-dev-server에서 코드를 실행 중입니다. 프로덕션에서는 소스 코드와 정적 파일이 복사되어 dist 디렉토리에 번들됩니다. 하지만 이미지가 아직 복사되지 않은 것 같아요 개발 모드를 사용하고 있습니다. 이미지가로드되지 않는 이유는 무엇입니까?

Answer 1

하루 동안 조정 한 후 해결책을 찾았습니다. 내 코드에서 몇 가지 실수를 저질렀습니다.

webpack-dev-server에서 이미지를로드하려면 webpack.config.js (또는 webpack-dev-server의 구성 파일에 지정한 이름)에 구성된 로더를 사용해야합니다. 이미지를 표시하지 않고 혼자 로더를 사용하여,

module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     include: path.join(__dirname, 'src') 
     }, 
     { test: /\.(png|jpg)$/, loader: 'url-loader?limit=90000' } 
    ] 
    }, 

지금 여기에 까다로운 부분을 제공 :

그래서 나는이 같은 모듈 섹션 내부의 로더 정의를 넣어. 자바 스크립트 코드에서 리소스로 요구해야합니다.

this.background.src = require('../images/bg.jpg'); 

을하지만 동기 모델에서 비동기 호출을 사용했기 때문에 그것은 여전히 ​​작동하지 않습니다 그래서 질문의 코드에서 나는이에

this.background.src = "../images/bg.jpg"; 

을 변경해야합니다. 콜백을 받고 콜백에 이미지를 그리려면 onload 호출을 변경해야합니다. 그런 다음 코드가 마침내 작동합니다. 그러면 다음과 같이 보입니다.

var image = this.background; 
var _canvas = document.getElementById('canvas'); 
this.ctx = _canvas.getContext('2d'); 
var drawBackground = function (callback) {  
     callback(this); 
} 

image.onload = drawBackground(() => { 
    let pattern = this.ctx.createPattern(image, 'repeat'); 
    this.ctx.fillStyle = pattern; 
    this.ctx.fillRect(0, 0, _canvas.width, _canvas.height); 
}); 
image.src = require('../images/bg.jpg');