vue的三种图片引入方式代码实例 - 行业资讯 - 肥雀云

这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

<强>首先给图片地址绑定变量:

　　　　　　& lt; template> 　　& lt; img src=" https://www.yisu.com/zixun/imgUrl "比; 　　& lt;/template> 　　　　

<强>在脚本中设置变量:

　　　　//方法1:直接将图片引入为模块　　要求从“. ./资产/imgUrl test.png”//方法2:把imgUrl放在数据中　　数据(){ 　　返回{ 　　imgUrl:要求(“. ./资产/test.png”) 　　} 　　} 　　补充方法2:(在数据数组中保存数据的情况) 　　数据(){ 　　测试:[ 　　{imgUrl:要求(“. ./资产/test.png”), id: ' 1 '}, 　　), 　　… 　　}//方法3:在生命周期函数中设置　　数据(){ 　　返回{ 　　imgUrl:“” 　　} 　　} 　　　　创建(){ 　　让urlTemp=白什?test.png”; 　　这一点。imgUrl=要求(“@/? urlTemp) 　　} 　　& lt;/script> 　　　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。