thymeleaf引⼊静态图⽚_Vue中引⼊图⽚路径的4种书写⽅式，以及相对路径与绝对路径。。。
vue中静态资源的引⼊机制
静态资源可以通过两种⽅式进⾏处理：
在 JavaScript 被导⼊或在 template/CSS 中通过相对路径(以 . 开头)被引⽤。这类引⽤会被 webpack 处理。
如 src="..."> 、 background: url(...) 和 CSS @import 的资源
例如， url(./image.png) 会被翻译为 require('./image.png')
放置在 public ⽬录下或通过绝对路径被引⽤。这类资源将会直接被拷贝，⽽不会经过 webpack 的处理，你需要通过绝对路径来引⽤它们。如果 URL 是⼀个绝对路径，例如 /images/foo.png ，它将会被保留不变。
假设有这样⼀个⽬录：
vue-path/----- public/-------- images/------------ XX.jpg----- src/-------- assets/------------ images/---------------- XX.jpg-------- App.vue
App.vue
⼀、常见的引⼊⽅式，路径是固定的字符串，图⽚会被webpack处理，⽂件若丢失会直接在编译时报错，⽣成的⽂件包含了哈希值：thyme
编译后:
⽽这样是不⾏的：
编译后:
错误的引⼊⽅式，使⽤ :src 调⽤了 v-bind 指令处理其内容，相对路径不会被webpack的 file-loader 处理。
⼆、当路径的⽂件名需要拼接变量的时候，可使⽤ require() 引⼊，在 template 的 :src 或者 script 的 data computed 中都可以进⾏require 引⼊或拼接。
编译后:
三、⽤绝对路径引⼊时，路径读取的是public⽂件夹中的资源，任何放置在 public ⽂件夹的静态资源都会被简单的复制到编译后的⽬录中，⽽不经过 webpack特殊处理。
编译后:
四、引⼊publicPath并且将其拼接在路径中，实现引⼊路径的动态变动。
编译后:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。