使用Vue获取img currentSrc
的意思是获取img标签中当前显示的图片的URL。
在Vue中，可以通过以下步骤来获取img currentSrc：
- 首先，在Vue组件中，使用
ref属性给img标签添加一个引用名称，例如ref="myImage"。 - 在Vue组件的
mounted生命周期钩子函数中，可以通过this.$refs来访问引用的DOM元素。 - 使用
this.$refs.myImage.currentSrc即可获取img标签当前显示的图片的URL。
这样，你就可以在Vue中获取到img currentSrc了。
关于Vue的更多信息和使用方法，你可以参考腾讯云的Vue.js产品介绍页面：Vue.js产品介绍
请注意，以上答案仅供参考，具体实现方式可能因项目需求和代码结构而有所不同。
相关·内容
2回答
如何在Vuejs 2中安装的axios绑定复选框列表上触发单击？
javascript、rest、vuejs2、axios
我正在尝试单击() Vue.js 2中的绑定复选框。我想在不使用jQuery的情况下，在已装载()生命周期事件中单击特定的动态复选框。
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<div ref='users' v-for="user in u
浏览 17提问于2017-07-19得票数 0
2回答
挂载方法在数据加载之前触发- VueJS
vue.js、lifecycle、vue-resource
我使用从REST检索图像集合。请求是在我的Vue组件的created挂钩中发送的。
问题是，我试图访问mounted钩子中检索到的数据，但是数据没有加载。
我在控制台中得到了这个错误：
Vue警告:挂载钩子错误："TypeError:无法读取未定义的属性'forEach‘“
这是我的组成部分：
<script>
export default {
data() {
return { imgs : '' };
},
created() {
// the full url is declare in my main.js
浏览 5提问于2017-12-08得票数 13
回答已采纳
3回答
如何在vue.js中访问以编程方式创建的refs？
vue.js、vue-component
我想访问vue.js组件中的引用，其中引用本身是动态创建的，如下所示：
<style>
</style>
<template>
<div>
<lmap class="map" v-for="m in [1, 2, 3]" :ref="'map' + m"></lmap>
</div>
</template>
<script>
module.exports = {
components: {
浏览 1提问于2020-05-07得票数 0
1回答
为什么Popper抛出错误Popper:在vuejs中提供的无效引用或popper参数
typescript、vue.js、vuetify.js
我在vue.js 2.6中编写了使用Propper.js的组件。
Component是-generic popover组件，用于在页面上的元素中显示过滤器和菜单等内容。
为了将数据传递到Popover函数中，我使用的是参考文献，也许这就是情况？
控制台抛出错误并说。
波普尔:提供了无效的引用或波普尔参数。它们必须是DOM元素或虚拟元素。
<template>
<div>
<div ref="popcorn" aria-describedby="tooltip">
<slot name="
浏览 7提问于2022-01-28得票数 0
回答已采纳
1回答
组件中的VueJS引用不起作用
javascript、vue.js
下面是我的代码的一个非常精简的版本： <html>
<head>
<script src="file:///D:/OtherWork/javascript/vue/vue.js"></script>
</head>
<body>
<div id="app">
<Dial style="width: 120px; height: 120px;" v-model="src_
浏览 20提问于2019-10-09得票数 0
回答已采纳
1回答
用VueJS动态编译和安装元素
javascript、jquery、datatables、vue.js、vuejs2
问题
我为jQuery DataTables为VueJS创建了一个轻量级包装器，如下所示：
<template>
<table ref="table" class="display table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th v-for="(column, index) in columns"
浏览 3提问于2017-04-26得票数 3
回答已采纳
1回答
页面加载后从video元素获取属性
javascript、vue.js、vue-component
我想从视频对象中获取'currentSrc‘值。这是我的代码
mounted: function () {
this.$nextTick(function () {
console.log(document.getElementById('video').currentSrc)
});
},
无论我做什么，我总是得到一个<empty string>。这很奇怪，因为当我这样做的时候：
mounted: function () {
this.$nextTick(function () {
console.log
浏览 59提问于2021-06-08得票数 1
回答已采纳
1回答
‘’this.$ref‘在父组件中总是为空的
javascript、vue.js、vuejs2、ref
我正在尝试执行ref的标准实现，以便将子元素插入到InfoBox中。但是，不管我把它作为'ref‘元素做什么，都不会把它放到我的InfoBox组件中。结果总是来自日志调用的{} undefined。
单击处理程序用于测试定时问题，因为使用created和mounted似乎是一个常见的问题。
<InfoBox
v-if="waitingForCode">
<p ref="infoboxcontent">A 7-digit verification code has been sent.</p>
</Info
浏览 0提问于2018-06-15得票数 0
回答已采纳
1回答
无法在vuejs中捕获‘hidden.bs.modal’
vue.js、bootstrap-4、bootstrap-modal、laravel-mix
我在Laravel项目中使用vue.js，但它无法捕获hidden.bs.modal事件。
在laravel-mix中使用autoload并在vue.js中捕获hidden.bs.modal时会出现此问题。(离开vue.js就可以了)
Mix文件
mix
.autoload({
'jquery': ['$', 'window.jQuery', 'jQuery'],
'moment': ['moment','window.moment'],
})
...
当使用带有la
浏览 2提问于2018-07-20得票数 1
2回答
vue.js如何获得自定义元素属性参数的值？
javascript、vue.js、vuejs2
在使用vue.js时，如何定义属性id号呢？我想$refs读取id="20"值。我希望console.log是21,10,15。去
看：
var app = new Vue({
el: "#app",
data: {
fruit: [{
id: 21,
name: 'Peach'
}, {
id: 10,
name: 'Apple'
}, {
id: 15,
name: 'Lemon'
}],
b
浏览 0提问于2018-01-20得票数 0
回答已采纳
1回答
如何在vue中获得特定div的动态宽度？
javascript、vue.js
在参考文献的帮助下，我试图动态地获取vue中容器的宽度。但是，它要么返回以前的值，要么显示未定义的值。我猜我做错了什么。我只想动态地得到一个特定的div的宽度。
我指的是，和，但没有运气
const app = new Vue({
el: '#app',
mounted () {
this.screenWidth()
},
methods: {
screenWidth() {
console.log("screen", this.$refs.container?.offsetWidth);
r
浏览 7提问于2022-03-06得票数 1
回答已采纳
2回答
Vue.js与TypeScript -获取ref子组件的类型
typescript、vue.js、vuejs2、vue-class-components
我的父组件有一个调用的子组件，并将引用传递给它：
<child
ref="childRef"
/>
现在，从父组件中运行子组件中的函数，如下所示：
mounted() {
(this.$refs.childRef as any).testFunction();
}
当然，它对任何类型都很好，但是如何设置正确的类型来运行这个函数呢？
如果我使用组件本身的类型：
(this.$refs.childRef as Child).testFunction();
它仍然说在'Vue‘类型上不存在属性testFunction。
我使用2版本的Vue.js。
我的孩
浏览 4提问于2022-07-22得票数 0
1回答
在vue.js上使用cropperjs裁剪图像时将aspectRatio转换为参数
javascript、image、vue.js、vue-component、cropperjs
我已经通过vue.js (这是我关注的教程：https://www.youtube.com/watch?v=6a6AzjbGLsI)创建了一个使用cropperjs的图像裁剪web应用程序。在mounted() Vue生命周期事件中，我将图像裁剪器的aspectRatio设置为1，但我希望将此aspectRatio转换为一个参数，以便可以重用我的代码。我该怎么做呢？ 这是我的文件ImageCropper.vue中的内容 <template>
<div>
<div class="img-container">
<
浏览 48提问于2020-12-17得票数 2
1回答
创建vue.js组件
vue.js
我通过以下方式创建了一个vue.js应用程序
vue init webpack myproject
然后，我遵循一个组件，为了创建简单的铜质组件，我将其放在src/ 目录下，如下所示：
<template>
<div id="app">
<polygon-crop :imageSource = "'src/assets/logo.png'"
ref="canvas"> </polygon-crop>
<button @click.prevent="crop"&g
浏览 7提问于2020-12-27得票数 0
3回答
VueJS组件ref在所有阶段都未定义。
javascript、vue.js、vuejs2、vue-component
我正在使用rails应用程序学习VueJS，而且我在尝试从父组件访问组件时遇到了问题。我可能做错了，但我不知道问题出在哪里。
我试图将我的问题归结为一个简单的html示例：
<html>
<head>
<meta charset='utf-8' />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div
浏览 1提问于2018-12-17得票数 0
回答已采纳
1回答
在VueJS 2组件模板外使用带dom元素的ref属性
vue.js、vuejs2、vue-component
目前，我很难用VueJS引用现有的DOM元素。
我有一个从应用程序twig模板呈现的现有日期输入和一个集成的单独的VueJS小部件。
<input type="time" ref="date_time_1" min="09:00" max="18:00" value="13:30">
日期输入字段不在组件模板中，而是在VueJS应用程序(具有id="#app")中。
对于数据绑定，我想使用ref属性将VueJS组件与组件模板中的日期输入字段连接起来(例如，对于使用来自应用程序的值进行初始
浏览 4提问于2020-02-23得票数 2
回答已采纳
1回答
(Vue.js 3 Options API)如何访问子方法？
javascript、vue.js、vue-options-api
我需要使用带有Options的Vue.js 3访问子组件的方法。在中有一个答案，但它适用于Vue.js 2和Vue.js 3，但使用的是复合API。
我仍然在父组件中尝试过这一点：
<dropdown-list @update="updateChildComponents"></dropdown-list>
<child-component-1 ref="childComponent1Ref" :url="url"></child-component-1>
<child-component-2
浏览 5提问于2022-02-09得票数 1
回答已采纳
1回答
Vue在计算之前读取v-bind:class
vue.js、vuejs2
我使用v-for来显示容器中的图像列表。在此之后，我在一个计算属性中使用$refs计算这些图像的开始和结束位置。 问题是我想使用v-bind:class=""来为它们添加动画，但Vue在创建计算属性之前就读取了它(我猜)。 <img ref="imageAnimate" class="image-parts"
v-for="(images, i) in finalImages"
:src="images.full_image_url"
:class="{animated
浏览 25提问于2019-02-17得票数 1
4回答
如何将父引用作为道具传递给子引用？
javascript、vue.js、vuejs2
我尝试将当前组件的引用传递给子组件，如下所示：
<template>
<div class="screen" ref="screen">
<child-component :screenRef="screenRef">
</child-component>
</div>
</template>
<script>
const Parent = {
name: 'parent'
浏览 0提问于2018-08-03得票数 20
2回答
如何在vue.js模板中使用注解
vue.js、npm、vuejs3、openseadragon、annotorious
我想在vue.js (vue 3)模板中使用注解(带有openseadragon插件)。我已经用npm安装了注解。这是我到目前为止所得到的： <template>
<div class="flex-grow">
<img ref="tag_img" width="100%" :id="img_id" src='../../assets/images/apple.png'>
</div>
<
浏览 119提问于2021-04-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
