vue中img的src动态赋值(require方法)

这篇具有很好参考价值的文章主要介绍了vue中img的src动态赋值(require方法)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • 如果不想更改路径,可以用require将图片作为模块加载进去
  • 用了require,就是将图片当成模块先引进来,再绑定。
<!--静态-->
<v-img :src="require('../../assets/img/classic.jpg')" alt="picture"/>
<!--动态-->
<v-img :src="require('@/assets/img/'+testUrl+'.png')"/>
  • 当需要实现动态加载图片的时候就需要传一个变量给require,在方法中给这个变量赋值
<template>
    <v-card class="my-auto mx-0" flat tile>
       <v-img :src="require('@/assets/img/'+testUrl+'.png')"/>
    </v-card>
</template>

<script>

export default {
  name: "assessmentResults",
  data() {
    return {
      testUrl:"1img",//测评图片路径
    }
  },
  methods: {
    ingUrl(){
      //...
      this.testUrl="222img";
    },
  },
}

</script>

参考文件:vue中img的src动态赋值(本地图片的路径) - 简书 文章来源地址https://www.toymoban.com/news/detail-514827.html

到了这里,关于vue中img的src动态赋值(require方法)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • img标签src动态绑定资源失败问题

    需要采用require的方式进行 在 Vue 中, require 是一个通用的模块加载函数,用于在运行时(客户端或服务器端)引入模块。它通常用于加载 JavaScript 文件、JSON 数据、静态资源等。 组件使用:  组件代码: 此时就可以实现正常的访问指定路径下的静态资源了。 原先的时候直接

    2024年02月07日
    浏览(61)
  • vue项目中,动态src引入图片,并且js根据文件名后缀,判断文件图片、视频、文档、pdf等类型的方法

    vue根据文件地址,获取后缀,根据后缀判断类型,然后根据类型动态展示不同类型的照片 1、处理后缀,根据后缀判断类型   2、根据返回的结果,直接将文件名命名为返回的结果,比如我有个图片类型的文件,经过上述的方法,返回的是image,那我直接要显示的图片名称就为

    2024年02月06日
    浏览(57)
  • 获取到img中src

    let src = str.match(/imgs+(.*?)src=\\\'\\\"/g) let srcs = src.map(item={ let k= item.match(/src=\\\'\\\"[\\\'\\\"]/)[1] return k }) srcs = srcs?srcs:[]

    2024年02月10日
    浏览(38)
  • js修改img的src属性显示变换图片到前端页面,img的src属性显示java后台读取返回的本地图片

    img的src属性是前端用来显示一张图片的来源,一般情况下src最常见是显示项目中resourcesstatic问价夹下的图片,或者显示公网上的图片,如果想要在前端显示本地图片那要怎么处理呢?如果直接用本地图片的地址(例如src=“D:Userstest.jpg”)前端是无法显示的。 img 是空标签,它

    2024年02月14日
    浏览(58)
  • 4.正则提取html中的img标签的src内容

    我们以百度贴吧的1吧举例 目录 1  把网页搞下来 2  收集url 3  处理url 4  空的src 5  容错 6  不使用数字作为文件名 7  并不是所有的图片都用img标签表示 8  img标签中src请求下来不一定正确 9  分页   搞下来之后,双击打开是这样的 我们实际拿的就是 img标签中src的内

    2024年02月09日
    浏览(46)
  • 024:vue中动态添加ref,通过ref更改css

    第024个 查看专栏目录: VUE ------ element UI 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,upda

    2024年02月10日
    浏览(32)
  • 在Vue中动态引入图片为什么要用require

    静态资源和动态资源 静态资源 动态的添加src 动态资源 我们通过网络请求从后端获取的资源 动态的添加src会被当成静态资源 动态的添加src最终会被打包成: 动态的添加图片最会会被编译成一个静态的字符串,然后再浏览器运行中会去项目中查找这个资源, 静态资源编译 默

    2024年02月13日
    浏览(52)
  • vue给input框属性赋值的方法

    在Vue中,可以使用 v-model ​指令实现双向数据绑定,让输入框的值与组件的数据属性保持同步。这里是一个简单的例子 创建一个Vue实例: 在页面中使用 ​** v-model ​ 指令:** 在这个例子中,我们创建了一个Vue实例,并在 data ​属性中定义了一个名为 inputValue ​的变量。然后

    2024年02月17日
    浏览(31)
  • vue路由中component的动态引入(import、require的各种写法)

    常用import写法(如下图): 常用写发,先用import通过路径引入组件对象,再赋给component。 稍微高级一点 直接“@”到目标主文件夹,不用敲那么多点点点。 来源转化:

    2024年02月06日
    浏览(66)
  • docker-compose.yml 文件更改后想使之立刻生效,但是不想手动删除已经建立的 container 等信息可以运行下面命令

    docker-compose.yml 文件更改后想使之立刻生效,但是不想手动删除已经建立的 container 等信息可以运行下面命令 重新创建容器实现修改

    2024年02月16日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包