web-dev-qa-db-ja.com

Vue components css background-image path error

出力

    output: {
        path: config.build.assetsRoot,
        publicPath: process.env.NODE_ENV === 'production' ? 
        config.build.assetsPublicPath : config.dev.assetsPublicPath,
        filename: '[name].js'
    }

ベース

  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: false,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },

ビルド後、インデックスページは正常に動作し、CSSバックグラウンドイメージパスは次のようになります

background: url(./static/img/bg_certificate.c5cad1e.png) no-repeat 50%;

しかし、コンポーネントのCSSの背景画像のパスエラー、このような

background: url(static/img/btn_my.b9186cc.png) no-repeat 50%;

パスが「./」を失うように見えます、

vue.jswebpack-2vue-loader
16
Wang.Shayne

絶対パスの代わりに、次のように、.vueファイル内のwebpackを使用して、現在のファイルの場所からの相対パスを指定する必要があります。

background: url(../../static/img/btn_my.b9186cc.png) no-repeat 50%;
5
Saurabh

設定について：

build: {
  ...
  assetsSubDirectory: '',
  assetsPublicPath: '/static/',
  ...
}

など：

background: url(/static/img/btn_my.b9186cc.png) no-repeat 50%;

相対パスの操作は、一般的な行では 悪夢 です。

5
Evhz
:style="{ backgroundImage: 'url(\'' + require('@/assets/bg3.jpg') + '\')' }

これは、背景画像に最適なソリューションになります。

1
Awais Jameel

background-imageのtemplate：

enter image description here

幸運を...

0
Akash