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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
React中的refs的使用教程
Feb 13 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
浅谈Web Storage API的使用
Jun 23 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python中os模块详解
2016/10/14 Python
简单谈谈Python流程控制语句
2016/12/04 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2015年维修工作总结
2015/04/25 职场文书
房产电话营销开场白
2015/05/29 职场文书
家长意见书
2015/06/04 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
python析构函数用法及注意事项
2021/06/22 Python
教你部署vue项目到docker
2022/04/05 Vue.js
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js