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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
javascript 播放器 控制
Jan 22 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
javaScript基础详解
Jan 19 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
linux 下实现python多版本安装实践
2014/11/18 Python
python http基本验证方法
2018/12/26 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
人力资源经理的岗位职责范本
2014/02/28 职场文书
大学校务公开实施方案
2014/03/31 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
安全保证书
2015/01/16 职场文书