How many ways to bring in resources when displaying pictures in img on vue pages?

data () {

 return{
    img:require("../../../static/imgs/advance/icon_1.png"),
    
    ===============
    
    repuire es6   webpack ?
    
    
    ==============
    
Mar.01,2021

two, according to the established custom, those that are not processed by webpack are put in static , and those that need to be processed are put in assets :

.
  1. one is to write the absolute path directly to the file in static without webpack processing, and directly write / static/xx/xxx.png .
  2. one is handled by using webpack, whether require or import, introduces proactively in the way you write , and declares no variable, which is used later.
< hr >

Note that only the code running in the js logic needs to use to actively introduce . After all, there is no webpack environment when the code starts to run on the client side, and the that you write directly in template will go directly to webpack.


  1. require is in CommonJS format
  2. es6 uses import

other ways of introduction can be found in js Modularization Development

Menu