vue 直接访问静态图片_在使用vue中实现本地静态图片路径(详细教程)
这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式,需要的朋友参考下吧
这里写图片描述
需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。
1.在img标签里面直接写上路径:
2.利用数组保存再循环输出:
{{ item.title }}
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里面的完整代码是这个:
{{ item.title }}
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
},
}
@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;
}
PS:下面看下Vue.js中的图片引用路径
当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形:
使用一
我们在data里面定义好图片路径
imgUrl:'../assets/logo.png'
然后,在template模板里面<img src="
{{imgUrl}}">
这样是错误的写法,我们应该用v-bind绑定图片的srcs属性
:src="imgUrl">
或者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 直接访问静态图片_在使用vue中实现本地静态图片路径(详细教程)相关推荐
- vue 代理设置 访问图片_详解Vue源码之数据的代理访问
概念解析: 1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写) 2) vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作 3 ...
- vue样式 引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 Jav ...
- node 压缩图片_嗯,手搓一个TinyPng压缩图片的WebpackPlugin也SoEasy啦
作者:JowayYoung 仓库:Github.CodePen 博客:掘金.思否.知乎.简书.头条.CSDN 公众号:IQ前端 联系我:关注公众号后有我的微信哟 特别声明:原创不易,未经授权不得对此文 ...
- 静态路由_【零基础学云计算】静态路由!静态路由!静态路由!原理与配置
本次和各位小伙伴分享的是静态路由的原理和配置,接下来我会从以下几个方面来和大家进行解析: 1.路由器的工作原理 2.路由表的形成 3.静态路由和默认路由 4.路由器转发数据包的封装过程 5.静态路由和 ...
- 前端vue适配不同的分辨率_浅析 React / Vue 跨端渲染原理与实现
当下的前端同学对 React 与 Vue 的组件化开发想必不会陌生,RN 与 Weex 的跨界也常为我们所津津乐道.UI 框架在实现这样的跨端渲染时需要做哪些工作,其技术方案能否借鉴乃至应用到我们自己 ...
- aws s3 静态网站_使用AWS S3存储桶启动静态网站
aws s3 静态网站 This article explores the AWS S3 bucket to configure a static website. 本文探讨了用于配置静态网站的AWS ...
- vue img src 动态赋值_一个基于Vue的开源延迟加载插件——vuelazyload
介绍 vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像. Github https://github.com/hilongjw/vue-lazyload 特点 轻 ...
- mysql数据库存歌_如何在mysql中存储音乐和图片文件
标签: 如何在mysql中存储音乐和图片文件? 果你想把二进制的数据,比如说图片文件和HTML文件,直接保存在你的MySQL数据库,那么这篇文章就是为你而写的! 我将告诉你怎样通过HTML表单来储存这 ...
- c#如何wmf图片转换成png图片_每日一学:如何将png图片转换为jpg图片
背景 最近在工作中会遇到需要将 png 图片转换为 jpg 图片的需求,主要原因也是 png 图片占的空间太大,如果图片数量上万张,可能就需要十几G的存储空间,所以希望转换为更小的 jpg 图片. 当 ...
- java中文件处理之图片_在Java 7中处理文件
java中文件处理之图片 以下是The Well-Grounded Java Developer的草稿的修改后的片段. 它使您快速了解与以前版本相比,在Java 7中操作文件要容易得多. 通过使用新的 ...
最新文章
- OpenJudge百炼习题解答(C++)--题4010:2011
- oracle表数据转换成sql,ORACLE8I转换数据到SQLSERVER数据库
- boost库安装编译指南
- 第14条:理解“类对象”的用意
- 从JS敏感信息泄露到GETSHELL
- makefile--嵌套执行(四)
- SQLSERVER根据字符 切割字符串的方法
- 局域网DNS服务器搭建
- SCI收录中国期刊国家一级期刊名录一览表
- 开心网(http://www.kaixin001.com)的一些JS代码分享
- vba-msgbox用法详解
- linux手机版模拟电脑,在你的PC上体验Firefox OS 1.3 模拟器
- Huawei 华为云 机器翻译调用 详解
- 【移动网络】[5G 核心网络架构] 5GC: Architecture
- VSCode 代码格式化的快捷键
- 函数概念 返回值 参数
- 云服务器搭建redis集群
- 记一次“Could not resolve host: mirrorlist.centos.org; 未知的错误“的解决过程
- 故障排查:maven下载依赖失败(Transfer failed)
- 软件项目管理MOOC(北邮)——第十一章测试答案
热门文章
- 机器学习(Machine Learning)深度学习(Deep Learning)资料(下)
- 定义一个鸭子的类java_鸭子类型:一切都是为了复用
- 零基础入门数据挖掘,看完这份详细的学习指南就够了!(附资料)
- 【Django】uWSGI和Gunicorn【转】
- CDD文件——CANdelaStudio
- 华科师兄快40岁才明白的道理
- 项目管理计划Office Project 2013 日常使用
- 位偏移 java_时区和偏移类 / Zone and Offset
- 从google code上clone代码出现 couldn't resolve proxy '(null)' while accessing 的解决方法(2012/12/06)
- 对mysql优化关注_效率提高N倍的19条MySQL优化秘籍