vue中本地静态图片路径写法


Posted in Javascript onMarch 06, 2018

这里写图片描述

需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。

1.在img标签里面直接写上路径:

<img src="../assets/a1.png" class="" width="100%"/>

2.利用数组保存再循环输出:

<el-carousel-item v-for="item in carouselData" :key="item.id">
    <img :src="item.url" class="carouselImg"/>
    <span class="carouselSpan">{{ item.title }}</span>
</el-carousel-item>
data: () => ({
   carouselData:[
   {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},
   {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
   {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3}
   ]
  }),

效果如下:

index.vue里面的完整代码是这个:

<template>
 <div>  <div class=" block">
  <el-carousel class="carouselBlock">
   <el-carousel-item v-for="item in carouselData" :key="item.id">
    <img :src="item.url" class="carouselImg"/>
    <span class="carouselSpan">{{ item.title }}</span>
   </el-carousel-item>
  </el-carousel>
  </div>
 <footer1></footer1>
 <img src="../assets/a1.png" class="" width="100%"/>
 </div>
</template>
<script>
  import footer1 from '../components/public/footer'
  export default {
  data: () => ({
   carouselData:[
   {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},
   {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
   {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3}
   ]
  }),
  components:{
      footer1
    },
 }
</script>
<style lang="scss">
  @import '../style/mixin';
  .carouselBlock{
    width: 100%;
    height: REM(300);
    position:relative;
    .carouselImg{
    height: REM(300);
    width:100%;
   }
   .carouselSpan{
    position: absolute;
    bottom: REM(20);
    left: REM(20);
    font-size: REM(24);
    font-weight: bold;
   }
  }
  .el-carousel__container{
    width: 100%;
    height: REM(300);
  }
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  margin: 0;
 }
 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

PS:下面看下Vue.js中的图片引用路径

当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形:

使用一

我们在data里面定义好图片路径

imgUrl:'../assets/logo.png'

然后,在template模板里面

<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="
{{imgUrl}}">

这样是错误的写法,我们应该用v-bind绑定图片的srcs属性

:src="imgUrl">

或者

<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="../assets/logo.png">

这种方式是按照正常HTML语法引用路径,放在模板里可以被webpack打包出来。

使用二

当我们需要在js代码里面写图片路径的时候,如果我们在data里面写

imgUrl:'../assets/logo.png'

此时webpack只会把它当做字符串处理从而找不到图片地址,此时我们可以使用import引入图片路径:

:src="avatar" />
import avatar from '@/assets/logo.png'

在data里面定义

avatar: avatar

情形三

我们也可以把图片放在外层的static文件夹里面,然后在data里面定义:

imgUrl : '../../static/logo.png'
:src="imgUrl" />

以上就是我们在Vue.js中引用图片路径的方式。

Javascript 相关文章推荐
js一组验证函数
Dec 20 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 #Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 #Javascript
React BootStrap用户体验框架快速上手
Mar 06 #Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 #Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 #Javascript
解决vue+webpack打包路径的问题
Mar 06 #Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 #Javascript
You might like
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP类的特性实例分析
2016/09/28 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
JS性能优化实现方法及优点进行
2020/08/30 Javascript
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Python decimal模块使用方法详解
2020/06/08 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
承诺书怎么写
2014/03/26 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
银行自荐信范文
2015/03/25 职场文书
《为人民服务》教学反思
2016/02/20 职场文书