vue img中的src使用变量引用

最新推荐文章于 2024-12-12 01:02:31 发布

原创最新推荐文章于 2024-12-12 01:02:31 发布 · 8.9k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #javascript #html

本文介绍如何在Vue.js项目中使用变量动态设置img标签的src属性，包括使用require加载图片资源以及通过v-bind绑定变量。

vue img中的src使用变量引用

正常 img 的使用如下

<img src="../../assets/material-detail/title-red.png" height="98" width="98"/>

如果想用变量替代src中的路径，首先在export的data中定义好路径，此处一定要加require

data() {
            return {
            	cardImgList: require('../../assets/material-detail/title-green.png'),
            	}
            }

然后将src用v-bind绑定，即可

<img :src="cardImgList" alt="card-name"/>

如果想v-for出图片数组的src，可以定义个图片数组，如

 cardImgList:[require('../../assets/material-detail/title-green.png'), require('../../assets/material-detail/title-yellow2.png'), require('../../assets/material-detail/title-red.png')],

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chestnut栗子

关注关注

9
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序 - 详细实现＜image＞图片 src 路径动态拼接多个变量，小程序图像 src 路径在模板上进行变量拼接，路径有变量报错如何解决（详细示例代码）

🏆 前端领域优质创作者

04-30

1万+

在微信小程序中对于动态图像`src`路径，您无法像正常`Vue`项目那样拼接变量路径，这归结于小程序框架底层。但在微信小程序中，您会收到报错提示。核心思路：将一切需要拼接的字符串，转为在`data`变量中存储，模板通过`{{}}`进行连接。这种问题有很多解决方案，比如在函数中直接处理好最终图片路径，模板直接使用。本文之所以选择之，是因其**灵活**特性，适用于多场景，因为您可以通过`js`对其进行动态改变，从而改变视图。

vue动态设置img的src路径实例

10-18

这通常意味着我们需要在Vue实例的data对象中定义一个变量来存储图片路径，并通过v-bind指令（或简写为：）来绑定这个变量到img的src属性上。在Vue2.x版本中，可以使用require函数来动态加载图片资源。这要求你安装...

1 条评论您还未登录，请先登录后发表或查看评论

Vue中图片Src使用变量的方法

10-16

主要介绍了Vue中图片Src使用变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Vue.js 动态为img的src赋值方法

10-18

下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue页面img标签 src使用变量

程序员二胖

09-11

8300

1、使用网络上的图片资源 <template> <div> <img :src="imgurl"></img> </div> </template> export default { data() { return { imgurl: 'http://www.codedemeter.com/blogfile/19_222949_14.jpg' }.

vue的image标签中src引用变量出现的问题

qq_54537215的博客

06-04

1815

vue的图片路径变量引入问题

Vue中img的src是动态渲染时不显示的解决

10-15

首先，Vue中的数据绑定允许我们将变量值绑定到元素属性上。通常，我们会使用Mustache语法（即双大括号{{ }}）来实现这一点。例如，如果我们想根据某个数据对象的属性来动态设置图片地址，我们会这样写： ```html ...

Vue中img的src属性绑定与static文件夹实例

08-30

例如，如果我们在 App.vue 中使用位于 src/assets/ 目录下的 logo.png 图片，我们可能会设置 `imgUrl = './assets/logo.png'`。但是，这种方法会导致图片加载失败。查看网页源代码，我们可以发现，网页把根域名...

关于img标签的src如何使用变量

yusdddd_的博客

05-06

3816

题主一开始在img标签中的src加入了变量，报了404的错误然后问了同学，同学告知是因为img把变量认为是常量了，查了大概二十分钟，发现只需要src前面加个冒号，就能解决问题。vue 的v-bind 因为觉得是很简单的问题，但是查了很久才查到结果，所以记录下来，如果有人搜索到的话可以更快的帮助到想解决问题的人 ...

vue用变量代替图片src路径解决方案

热门推荐

【03】的博客

11-28

1万+

vue用变量代替图片src路径3种解决方案方法1：用网络图片直链 html <template> <img :src='imgSrc'/> </template> js export default { data(){ return{ imgSrc:'http://pic.qiantucdn.com/58pic......

vue中图片做适配_Vue中图片Src使用变量

weixin_39620334的博客

01-26

543

相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况，如定制化背景，动态展示头像等。可能也犯过如下错误# 错误描述页面直接调用图片资源的方案<img src="../../static/images/web_bg.png" /> 改写成变量形式，于是如下编写<template> <img :src="imgSrc" /></template...

vue src后面加上变量名

weixin_43637766的博客

04-21

1780

音频播放的src中使用变量

vue中图片的src是变量的时候，

白白的博客

03-01

1076

直接把循环所得的变量放在src会出错，需要使用require导入图片，但是不能直接在src那里写导入，我这么写也报错，放在一个函数里面不会报错，因为require在上标签写的时候，只读取字符串，不会拼接。 <div v-for="item in arr"> <div class="imgBox"> <img :src="getImg(item.img)" alt=""> &.

vue中img标签src属性自定义变量

qq_41875271的博客

09-19

3101

vue中img标签src属性自定义变量（一）在标签内用require导入，注意格式 <img :src="require('../../assets/' +imgUrl+'.png')" /> （二）在data中定义 data() { return { imgUrl: 'popup-perishable' } },

Vue中img的src属性绑定

06-26

460

正确：<img :src=" 'files/'+value.src "> 或 <img :src="value.src">错误：<img src="{{value.src}}"> 转载于:https://www.cnblogs.com/wstmljf/p/9228322.html

vue image的src属性动态绑定以及渲染

weixin_67647268的博客

09-21

1100

name: "正常运行",name: "正常停机",name: "故障停机",name: "通讯故障",name: "检修模式",name: "急停",name: "警告",name: "过载",

vue的img标签scr加载图片地址变量加载不出来

最新发布

qq_74237833的博客

12-12

443

vue中img标签的src属性直接用相对地址加载无误：但改为变量后加载不出来：

Vue3 动态渲染 img 的 :src

博客

08-08

2274

Vue3 动态渲染img标签的:src

vue中image的src路径问题

weixin_55041114的博客

08-20

1081

所以问题就很好解决了，只要把我们要加载的图片放置在public下或image src下不要出现assets。我在加载文件的时候，遇到这样的问题：图片路径引入没有问题，但是控制台中就是报错。实际上我们在访问我们自己地址的时候。

vue3 img 中变量引入src

06-13

在Vue 3中，可以使用插值表达式(`{{ }}`)和`v-bind`指令来动态绑定`<img>`标签的`src`属性。如果你想要绑定一个变量作为`<img>`标签的`src`属性，可以使用插值表达式和模板字符串来实现。例如： ``` <template> <div> <img :src="`${imgBaseUrl}/${imageName}`" alt="My Image"> </div> </template> <script> export default { data() { return { imgBaseUrl: 'http://example.com/images', imageName: 'my-image.jpg' } } } </script> ``` 在上面的代码中，我们使用了模板字符串来将`imgBaseUrl`和`imageName`拼接成完整的图片URL，并将其绑定到`<img>`标签的`src`属性上。这样，当`imgBaseUrl`或`imageName`发生变化时，图片的URL也会相应地更新。另外，你还可以使用`v-bind`指令来绑定`src`属性，例如： ``` <template> <div> <img v-bind:src="imageUrl" alt="My Image"> </div> </template> <script> export default { data() { return { imageName: 'my-image.jpg' } }, computed: { imageUrl() { return `http://example.com/images/${this.imageName}` } } } </script> ``` 在上面的代码中，我们定义了一个计算属性`imageUrl`，用于返回完整的图片URL，并将其绑定到`<img>`标签的`src`属性上。当`imageName`发生变化时，计算属性`imageUrl`也会相应地更新。