vue 关于图片路径的问题

在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的

<img  src="../assets.1.jpg"/>

如果我要用v-bind去动态绑定呢,正常思路来说 我会这样写,但是在vue 中 他会被当成一个字符串来处理,并不会转换为图片的路径

<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>

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。

原文地址:https://www.cnblogs.com/huangenai/p/9736140.html

时间: 2024-10-01 10:12:39

vue 关于图片路径的问题的相关文章

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

vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo.png" > 2.app.vue  <style>中引入图片 body {background: url('../static/img/back5.jpg');} 3.组件行间样式引入背景图片 <div style="background-image:url(’s

vue动态定义图片路径

 当我在html模块或者css中引入图片的时候用相对路径,例: <div> <img src="../../assets/img/policeImg/tt.png"> </div>   这时候图片可以正常显示,但是我想把图片路径动态化,所以我会把图片路径绑定在data中. <div> <img :src="img"> </div> <script> export default {

$Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数

一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候  表名小写_set.all()不知是哪个字段queryset对象  所以说related_name='coursedetail_by' 3 Vue生命周期钩子可以直接发axios 二 Vue样式用elemen(jq用bootstap) 网站http://element-cn.eleme.io/#/zh-CN/guide/design 1 em

jQuery获取和设置disabled属性、背景图片路径

之前对于这个独特的disabled属性获取和设置很混乱,今天项目中用到了,用attr不能实现,于是多次试验得出: 获取disabled属性用prop $("#basic_key").prop("disabled") 以上会返回true或false. 然后设置disabled是attr,重点是后面的一个参数不加引号: $("#basic_key").attr("disabled",'false') //false加引号是错误的~

Android 4.4从图库选择图片,获取图片路径并裁剪

转自:http://blog.csdn.net/tempersitu/article/details/20557383 最近在做一个从图库选择图片或拍照,然后裁剪的功能.本来是没问题的,一直在用 [java] view plaincopy Intent intent=new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI); 的方式来做,是调用系统图库来做,但是发现如

【iOS开发-3】sandbox沙盒介绍以及如何取得沙盒里面各文件的路径,图片导入方式和图片路径获取

其实每个APP的程序都是单独的一个文件夹,每个APP之间相互之间独立,所以它们的文件夹也是独立的,这个文件夹就是沙盒.沙盒好处,安全.坏处,程序之间彼此共享数据较为困难. (1)如何找到应用程序的沙盒源文件? 一般沙盒源文件都存放在~/Library/Application Support/iPhone Simulator/版本号/Applications/的文件夹中,但是这个Library(中文名叫资源库)文件夹是隐藏的.所以需要方法才能点击进去:在Finder中按CMD+SHIFT+G,然后

kindeditor文本编辑器删除文本中图片路径出错

string[] imgname; MODEL.Strategy modelMenu = bllMenu.GetModel(int.Parse(strId)); imgname = getPicUrl.getPicUrls(modelMenu.SContent).Split('|'); foreach (string c in imgname) { ImageHelper.DeleteImg(HttpContext.Current.Server.MapPath(c)); } kindeditor

在数据库中 存储图片 以及 在界面中显示图片(存储图片路径)- 这种方法相对与存储二进制文件好

花了一下午时间,终于学会了在数据库中存储图片,以及在界面中显示图片了. 存储图片有两种方法: 一种是:直接把图片转换成二进制文件存储在数据库中. 一种是:存储图片的路径到数据库,用的时候直接调用路径给image等图像控件即可. 两种方法,有利有弊,第一种方法适合存储量少且重要的图片信息.第二种方法适合存储量大但不是太重要的图片. 我使用的是第二种方法,简单,实用. 下面就是我具体的实现过程: 首先我新建了两个网页文件,insert_photo.aspx / select_photo.apsx 第

MVC中用 BundleCollection 压缩CSS时图片路径问题

MVC中有个专门提供JS和CSS压缩的类,BundleCollection,其实这个类也可以在asp.net中用, 关于BundleCollection类的详细推荐个地址:http://www.cnblogs.com/lifeil/archive/2013/03/11/2954071.html 我这里只是记录下使用过程中遇到的两个小问题 1.css被压缩后,里面图片路径文件的问题 我们可以看到MVC中 BundleConfig这个类里,都是自动生成的好多需要压缩的JS和CSS bundles.A