在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 关于图片路径的问题的更多相关文章

  1. vue项目图片路径问题

    一般情况下我们为了能在本地显示效果,写图片路径会直接这样写,但是在实际中图片一般都是动态上传的, 所以,在vue中一般是这样的: 但是这样你会发现,图片根本显示不出来,只是显示了个图片的图标. 后来发 ...

  2. vue的图片路径,和背景图片路径打包后错误解决

    最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1 ...

  3. vue实现图片路径传送

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  4. freemarker与vue使用图片路径获取问题,可双单引号一起使用则可

    <el-table :data="leftPage.datas" style="width: 100%"  @selection-change=" ...

  5. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  6. vue图片、背景图片路径问题

    vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...

  7. Vue如何在data中正常引入图片路径

    在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错:                        刚开始以为是路径出问题了,于是绝对路径.相对路 ...

  8. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  9. Vue 动态设置图片路径

      大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的   本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...

随机推荐

  1. java38

    字符串内存分析 String str = new String("ABCD") 会先在堆中开辟一个空间,然后去常量池(方法区)中寻找是否有该变量,如果有,直接引用常量池中的内容 如 ...

  2. Python从入门到超神之文件处理

    一.文件处理流程(python默认是utf-8编码) 打开文件函数:open(文件路径,encoding=‘utf-8’)注意:open会检索系统的编码,所以需要调整一致否则报错 例如:fi=open ...

  3. inet_pton, inet_ntop

    Linux下这2个IP地址转换函数,可以在将IP地址在“点分十进制”和“整数”之间转换而且,inet_pton和inet_ntop这2个函数能够处理ipv4和ipv6.算是比较新的函数了. inet_ ...

  4. (转载)python 命名.py 不能与模块相同,否则会报错

    在学习python网页爬虫时,测试requests的post方法进行表单提交时,命名.py文件为requests.py 代码如下: import requests params={'firstname ...

  5. Cannot run CentOS 7 or RHEL 7 installer: “Failed to start Switch Root”

    这个问题是由于安装程序默认的LABEL对于你要安装的磁盘系统分区不匹配造成的 通过编辑引导参数来使安装程序运行 在选择安装选项之前,按‘e’添加相应的引导参数

  6. unic

    在线考试 答题剩余时间0小时51分18秒 考生须知 1.本次考试结束后,剩余补考次数:2次 2.考试时间为60分钟,超时系统自动交卷 3.本次考试满分100分(5*20道),60分通过考试 1. (单 ...

  7. jquery综合

    1.选择器性能比较: http://www.jcodecraeer.com/a/javascript/2012/0418/112.html http://developer.51cto.com/art ...

  8. windows putty xming virt-manager

    记一次windows环境使用linux下使用virt-manager软件的问题 环境:windows server 2008.ubuntu-server 软件:putty.virt-manager.x ...

  9. HDU1262-寻找素数对

    //#include<bits/stdc++.h> #include<map> #include<cstdio> #include<string> #i ...

  10. 阿里云,未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接.

    阿里云主机使用SQL Server作为数据库服务器,连接数据库时候出现错误. 按照网上经验,检查SQL服务是否开启,sa用户权限,数据库安全性和连接权限: 关闭服务器防火墙,修改入站规则: 检查阿里云 ...