资源定位
静态资源引用
模板中引用静态资源,不能直接将资源的路径写在模板中,而是要通过js中require该静态资源得到变量,在模板中引用该变量。
该路径会根据项目配置的publicPath自动替换成正确路径。利用该功能可以实现静态资源开发路径和部署路径之间的分离,开发者只需要写相对路径,线上可以通过设置publicPath
指定任意路径。
<template>
<!--
错误形式
<image src="./assets/logo.png" />
-->
<!-- 正确形式 -->
<image src="{{imgPath}}" />
</template>
<script>
class Index {
data = {
imgPath: require("./assets/logo.png")
}
};
export default new Index();
</script>
图片base64
支持在引用图片url后面添加inline
参数,以指定图片的base64格式,例如:
<script>
class Index {
data = {
imgPath: require("./assets/logo.png?__inline")
}
};
export default new Index();
</script>