在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. Python 3.6安装yaml时报"AttributeError: module 'pip' has no attribute 'main'"和“Non-zero exit code”错误

    1.Python 3.6安装yaml时一开始报AttributeError: module 'pip' has no attribute错误,根据网上提供的解决方法修改Pycharm安装目录D:\Pr ...

  2. session随笔

    ·由于cookie中不能保存很多信息,于是Session出现来完成这个功能. ·Session的作用就是在服务器保存一些保存一些用户的数据,然后传递给用户一个名字为JSESSIONID的Cookie, ...

  3. SQL语句操作数据

    --切换数据库:手动切换和命令切换 use MySchool --向Student表中插入数据 --语法:INSERT [INTO] 表名 (列名) VALUES (值列表) --注意事项: --1. ...

  4. linux系统下部署DNS反向解析

    DNS服务概述 DNS(Domain Name System)域名系统,能够提供域名与IP地址的解析服务. 反向解析 反向解析是从IP地址到域名的解析过程.主要作用于服务器的身份验证. 部署反向解析 ...

  5. python可能会用到的网络基础

    网络编程 1.两种构架:(1)C/S构架:client, server (2) B/S构架:browser,server 2.地址相关:(1)MAC地址,物理地址,唯一,但可以更改 (2)ip地址,网 ...

  6. selenium批量执行脚本操作

    import unittest import os from HTMLTestRunner import HTMLTestRunner # 待执行用例的目录 def allcase(): #引入执行用 ...

  7. LOJ-10095(缩点的特殊使用)

    题目链接:传送门 思路: 缩点求最值,但是有一点行不通,如果被选中的点才能缩点,否则缩点没有意义: 所以就先缩选中的点,然后从小到大统计没有缩点的点,就是NO: 如果找最小值,就是一个环里的最小值,然 ...

  8. apache kylin的单节点及多节点安装

    Kylin的使用安装文档Kylin简介Kylin是什么Apache Kylin是一个开源的分布式分析引擎,最初由eBay开发贡献至开源社区.它提供Hadoop之上的SQL查询接口及多维分析(OLAP) ...

  9. redis_字符串对象

    Redis总共支持五种数据类型:string,hash,list,set及zset.这里介绍字符串类型的实现 首先了解字符串对象的结构 // redis对象内存分配,列出主要相关的属性 redisOb ...

  10. 使用vmware vconverter从物理机迁移系统到虚拟机P2V(多图)

    zhuan:https://segmentfault.com/a/1190000002697929 本文完整记录了如何从物理服务器,保持所有环境配置信息,纹丝不动的迁移到虚拟机上,俗称 P2V .采用 ...