vue + webpack project img can not load 정적 src

Question

내 vue (2.0) + webpack 프로젝트에서 vue-html-loader를 설정했지만 내 .vue 파일에서 img 태그가 정적 src 이미지를로드 할 수 없습니다.

<img src="/web/img/sieleLogo@1x.png" srcset="/web/img/sieleLogo@2x.png" /> 

내 브라우저는 항상 404 오류가 나올 :

module: { 
    loaders: [ 
     ... 
     { 
      test: /\.html$/, 
      exclude: /node_modules/, 
      loaders: ['html', 'html-minify'] 
     } 
     , { 
      test: /\.vue$/, 
      loader: 'vue' 
     } 
     ... 
    ] 
}, 
vue: { 
    ... 
    html: { 
     root: path.resolve(__dirname, './source/static'), 
     attrs: ['img:src', 'img:srcset'] 
    }, 
    loaders: { 
     css: ExtractTextPlugin.extract("css"), 
     sass: ExtractTextPlugin.extract("css!sass") 
    } 
}, 
resolve: { 
    root: [ 
     path.resolve('./source') 
    ], 
    extensions: ['', '.js', '.json', '.scss', '.html', '.css', '.vue'], 
    alias: { 
     'vue': 'vue/dist/vue.js' 
    } 
}, 

아래는 내 .vue 파일입니다 다음은 내 웹팩 설정입니다. 누군가가 같은 문제를 겪었나요?

Answer 1

내가 나를 위해 작동 내 웹팩 설정에 다음과 같은 한 :

module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue', 
     options: vueConfig 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'url', 
     options: { 
      limit: 10000, 
      name: '[name].[ext]?[hash]' 
     } 
     } 
    ] 
    } 

내가 어떤 특정 설정없이 액세스하고 표시 할 수 src/assets 폴더에있는 이미지를 가지고있다.

나는 당신의 웹팩 별칭 내에서 정적 img 디렉토리 별칭을 추가 할 것

Answer 2

, 즉 지금

resolve: { 
    ... 
    alias: { 
    'vue': 'vue/dist/vue.js', 
    'img': path.resolve(__dirname, '../web/img') // or wherever it is located relative to this file 
    } 
} 

당신이 즉, ~img를 통해 정적 인 이미지를 참조 할 수 있습니다

<img src="~img/sieleLogo@1x.png" srcset="~img/sieleLogo@2x.png" /> 

---

보장하기 위해 당신은 당신의 webpack 설정에 vue-html 로더를 추가해야합니다 귀하의 HTML 내에서 위의 구문을 수 있습니다 :

module: { 
    loaders: [ 
    ... 
    { 
     test: /\.html$/, 
     loaders: 'vue-html' 
    } 

나는 현재의 HTML 로더를 위의 코드로 바꿀 것입니다.

그러나이 모든 제쳐 - 내가 strongely 설치 권하고 싶습니다 인해 고체 웹팩 VUE 응용 프로그램 비계의 복잡성에VUE-CLI : https://github.com/vuejs/vue-cli

이 그럼 당신은 단순히 테스트 기능을 출시 할 수 웹팩 환경 :

https://github.com/vuejs-templates/webpack

단순히 그것으로 응용 프로그램을 복사합니다. 당신은 약간의 리팩토링을해야 할 것 같지만 셋업에 걸리는 시간은 절대적으로 가치가 있습니다.