Vue — Version 3.6.3 records the several ways of writing image paths introduced into VUE summarized below

The introduction mechanism of static resources in VUE

Vue.js about static resources
The official documentation

Static resources can be processed in two ways:

  1. Is imported in JavaScript or in template/CSS via a relative path (to. At the beginning) is quoted. Such references are handled by WebPack.

    • Such as < img SRC = “…” >, background: url (…). And css.import resources

      • Inline style in templatebackground: url(...)Style, in the current version of testing, is not processed by WebPack even when relative paths are used
    • For example,url(./image.png)Will be translated asrequire('./image.png')

  2. Placed in a public directory or referenced by an absolute path. These resources will be copied directly, not processed by WebPack, and you will need to refer to them through the absolute path.

    • If the URL is an absolute path, for example/images/foo.png, it will be left unchanged.

Directory structure:

vue-path/


—– public/


——– images/


———— XX.jpg


—– src/


——– assets/


———— images/


—————- XX.jpg


——– App.vue


.

The introduction of the sample

App.vue:

  1. Square root

    < img SRC = ". / assets/images / 01. JPG "Alt =" "> / / / /) compiled: < img SRC ="/img / 01. F0cfc21d. JPG "Alt =" ">

    The path is a fixed string, the image will be processed by WebPack, the missing file will be directly reported in the compilation error, and the generated file contains the hash value

  2. x

    : < img SRC = "'. / assets/images / 02. JPG '" Alt =" "> / / / / compiled: < img SRC =". / assets/images / 02. JPG "Alt =" ">

    The relative path is not processed by webPack’s file-loader

  3. Square root

    : < img SRC = "the require (".. / assets/images / 03. JPG ')" Alt = "" > < img: / /) SRC =" the require ('/assets/images/' + enclosing imgName + 'JPG')" < img Alt = "" > / / square root: SRC =" img3 "Alt =" "> < script > / /) export default: {data () {return {imgName: '03. JPG, Img3: the require (".. / assets/images / 03. JPG '),}},} < / script > / / compiled: < img SRC = "/ img / 03. Ea62525c. JPG" Alt = "" >

    You can use require() to concatenate variables in the file name of a path, or require or concatenate variables in template: SRC or Script data computed

  4. material

    < img SRC = "/ images / 04. JPG" Alt = "" > / / / / compiled: < img SRC ="/images / 04. JPG "Alt =" ">

    When an absolute path is introduced, the path reads the resources in the public folder, and any static resources placed in the public folder are simply copied to the compiled directory without any special webPack treatment. If your application is deployed at the root of a domain name, such as http://www.abc.com/, then this import will work fine. PublicPath is the base URL for deploying the application package. This is done in vue.config.js. See the official documentation for details

  5. Square root

    : < img SRC = "enclosing publicPath + 'images / 05. JPG'" Alt = "" > / / / /) compiled: <img src="/foo/images/05.jpg" alt=""> <script> export default:{ data(){ return { publicPath: process.env.BASE_URL, } }, } </script>

    The vue. Config. Js:

    //vue.config.js
module.exports = {
    publicPath:'/foo/',
    ...
}

    PublicPath is introduced and spliced into the path to realize the dynamic change of the path

reference

https://cli.vuejs.org/zh/guid…

https://cli.vuejs.org/zh/conf…

https://www.cnblogs.com/xiaoj…