backgroundImage path problem vue picture manner of introduction

From: https: //blog.csdn.net/MoLvSHan/article/details/78204972
from: https: //blog.csdn.net/qq_35393869/article/details/80333564

Project pictures are placed in src / img folder, img and background-image references relative path, that this form of ../../

Packing is provided in the build path assetsPublicPath: './', then those who do not turn into base64 background are ineffective ,, path.

Approach:
Use require the introduction of picture

img tag

<img :src="require('assets/img/header/search.png')">

Background

<div :style="{backgroundImage:'url('+require('assets/img/common/bg.png')+')'}"></div>


        <span :style="{backgroundImage:'url('+require('../../assets/image/accounts/dayily.png')+')'}">

Here in this way can also write to:

In the front-end development, background-image attributes are very common, there is often need to use inline styles to bind this property, but the vue-cli project, if, as in the following code will not find pictures to fill path

<script type="text/javascript">
    import TemplateNav from './TemplateNav'
 
    export default {
        name: 'FooterNav',
        components: {
            'TemplateNav': TemplateNav
        },
        data() {
            return {
                //使用相对路径会找不到图片
                shouye:'url(../../assets/images/shouye/index2x.png)',
                fenlei:'url(../../assets/images/shouye/fenlei2x.png)',
                search:'url(../../assets/images/shouye/search2x.png)',
                shopcart:'url(../../assets/images/shouye/gouwuche2x.png)',
                mine:'url(../../assets/images/shouye/I2x.png)'
            }
        },
        props: {
            num: {
                default: '0'
            }
        },
    }
</script>

The right should read:


data() {
    return {
        shouye:'url(' + require('../../assets/images/shouye/index2x.png') + ')',
        fenlei:'url(' + require('../../assets/images/shouye/fenlei2x.png') + ')',
        search:'url(' + require('../../assets/images/shouye/search2x.png') + ')',
        shopcart:'url(' + require('../../assets/images/shouye/gouwuche2x.png') + ')',
        mine:'url(' + require('../../assets/images/shouye/I2x.png') + ')'
    }
}

Use require () method, require () method is node.js

<template>
  <div class="demo">
    <!-- 成功引入的三种方法： -->
    <!-- 图1 -->
    <div class="img1"></div>
    <!-- 图2 -->
    <div class="img2" :style="{backgroundImage: 'url(' + bg2 + ')' }"></div>
    <!-- 图3 -->
    <img src="~@/../static/images/logo3.png" width="100">
  </div>
</template>

<script>
import Bg2 from '@/../static/images/logo2.png'

export default {
    name: 'App',
    data () {
        return {
            bg2: Bg2,
        }
    }
}
</script>

<style>
    .demo{width: 100px;margin: 50px auto;}
    .img1{
        width: 100px;
        height: 100px;
        background: url('~@/../static/images/logo1.png') center center no-repeat;
        background-size: 100px auto;
    }
    .img2{
        width: 100px;
        height: 100px;
        background-position: center center;
        background-repeat:  no-repeat;
        background-size: 100px auto;
    }
</style>

Such as the above code, appears: @ ~ / and @ /, if removed, the test results are normal, you can also remove, does not affect.

Error code screenshot comparison, as follows:

change:

<div :style="{backgroundImage: 'url(https://cn.vuejs.org/images/logo.png)', width: '400px', height: '400px'}">foo</div>

Compared to other methods:
If you use a vue-cli scaffolding, find ExtractTextPlugin position in the build / utils.js added the phrase publicPath in object: '../../' on the line

With specific reference to the official documentation: Class and Style Bind