vue 关于图片路径的问题
在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的
<img src="../assets.1.jpg"/>
如果我要用v-bind去动态绑定呢,正常思路来说 我会这样写,但是在webpack中 他会被当成一个字符串来处理,并不会转换为图片的路径
<img src="src"/> export default {
name: 'index',
data () {
return {
imgsrc2: '../assets/1.jpg'
}
}
}
正确的写法
imgsrc2: require('../assets/1.jpeg')
如果图片路径不是本地静态图片 就不需要 require 啦
<template>
<div>
<img width="100" height="100" :src="imgsrc1" alt="">
<img width="100" height="100" :src="imgsrc2" alt="">
</div>
</template> <script>
export default {
name: 'index',
data () {
return {
imgsrc1: 'http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg',
imgsrc2: require('../assets/1.jpeg')
}
}
}
</script> <style scoped>
</style>
此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
vue 关于图片路径的问题的更多相关文章
- vue项目图片路径问题
一般情况下我们为了能在本地显示效果,写图片路径会直接这样写,但是在实际中图片一般都是动态上传的, 所以,在vue中一般是这样的: 但是这样你会发现,图片根本显示不出来,只是显示了个图片的图标. 后来发 ...
- vue的图片路径,和背景图片路径打包后错误解决
最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1 ...
- vue实现图片路径传送
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- freemarker与vue使用图片路径获取问题,可双单引号一起使用则可
<el-table :data="leftPage.datas" style="width: 100%" @selection-change=" ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- vue图片、背景图片路径问题
vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...
- Vue如何在data中正常引入图片路径
在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错: 刚开始以为是路径出问题了,于是绝对路径.相对路 ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- Vue 动态设置图片路径
大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的 本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...
随机推荐
- gperftools对程序进行分析
gperftools是google出品的一个性能分析工具,相关介绍可见:https://github.com/gperftools/gperftools/wikigperftools性能分析通过抽样方 ...
- Asp.net Zero 应用实战-最初部署问题
此时用的是aspnet-zero-core-4.3.0 1.前两天vs2017刚刚最新升级了,打开后就报错,然后就根据提示把每个项目文件中添加了 <PropertyGroup> <E ...
- 【转】Android总结篇系列:Activity生命周期
[转]Android总结篇系列:Activity生命周期 Android官方文档和其他不少资料都对Activity生命周期进行了详细介绍,在结合资料和项目开发过程中遇到的问题,本文将对Activity ...
- 前端js收藏
1 爱心特效 <script type="text/javascript"> (function(window,document,undefined){ var hea ...
- spark原理
SparkContext将应用程序代码分发到各Executors,最后将任务(Task)分配给executors执行 Application: Appliction都是指用户编写的Spark应用程序, ...
- Parsing error was found in mapping #{}. Check syntax #{property|(expression), var1=value1, var2=val错误
xml中有一个语法错误,整个都错了, 虽然只调用了select查询的方法,但是update中也有语法错误
- PS扣签名
1.用PS打开签名: 2.在图层界面切换到[通道],选择一个黑白分明或者明暗明显的签名图通道.按着“Ctrl”键就会显示出手指和方块的图标,按键的同时左击一下选择的通道: 3.切换到第一项的[图层]界 ...
- REdis MASTER aborted replication NOAUTH Authentication required
对于REdis集群,如果设置了requirepass,则一定要设置masterauth,否则从节点无法正常工作,查看从节点日志可以看到哪下内容:19213:S 22 Apr 2019 10:52:17 ...
- python操作Redis安装、支持存储类型、普通连接、连接池
一.python操作redis安装和支持存储类型 安装redis模块 pip3 install redis 二.Python操作Redis之普通连接 redis-py提供两个类Redis和Strict ...
- mongdb的索引及备份
1. mongodb的索引 1.1 为什么mongdb需要创建索引 加快查询速度 进行数据的去重 1.2 mongodb创建简单的索引方法 语法: db.集合.ensureIndex({属性:1}), ...