vue introduction of dynamic picture address

1, the relative path is introduced (Assets file folder under src)

When you are in JavaScript, CSS, or  *.vue use a relative path (must file  . at the beginning) references a static resource, which will be included into the webpack dependency graph. In its compilation process, such as all  <img src="...">, background: url(...) and CSS  @import resource URL will be resolved as a dependent module.

For example, url(./image.png) it will be translated into  require('./image.png'), and:

<img src="./image.png">

It will be compiled into:

h('img', { attrs: { src: require('./image.png') }})

 

So please use require the introduction of picture Address:

<div
        class="service layout"
        :style="{ backgroundImage: 'url(' + bjPic + ')' }"
        id="anchor3"
    >
</div>

data() {
        return {
            bjPic: require("../assets/chan-bj.jpg")
        };
    },

 

2, static folder introduction of picture

If introduced from static folder, without the use of require, because the file folders are not static compiled a file-loader.