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

最新推荐文章于 2024-08-28 21:51:41 发布

木偶陈

最新推荐文章于 2024-08-28 21:51:41 发布

阅读量2.9k

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41875271/article/details/108676764

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

（一）在标签内用require导入，注意格式
     <img :src="require('../../assets/' +imgUrl+'.png')" />

（二）在data中定义
    data() {
			return {
				imgUrl: 'popup-perishable'
			}
	  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木偶陈

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

VueRouter 的原理及自定义Route

qt的博客

12-24

864

Vue Router 实现原理 Vue Router基础 Hash模式和 history模式模拟实现自己的Vue Router 基本使用在使用vue创建项目时，使用Rouer选项自动安装依赖项 import Vue from 'vue' import VueRouter from 'vue-router' import Index from '../views/Index.vue' // 1. 注册路由插件 Vue.use(VueRouter) // 路由规则 const routes = [

vue 添加自定义属性不依赖data数据_前端面试大全：Vue源码解读

weixin_39600366的博客

02-03

145

这一篇文章我们将深入解读vue源码实现，带大伙逐步的去理解vue的实现原理。这些知识点相对而言理解起来会很有难度，可能需要多次阅读才能理解。响应式原理Vue 内部使用了 Object.defineProperty() 来实现数据响应式，通过这个函数可以监听到 set 和 get 的事件。var data = { name: 'yck' }observe(data)let name = data.n...

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

vue页面img标签 src使用变量

程序员二胖

09-11

8046

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

vue img中的src使用变量引用

chestnut栗子的博客

10-27

8682

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-

关于VUE3中动态绑定img标签的src属性的问题

热门推荐

puyahua的专栏

09-12

2万+

如何给img标签里的请求的添加自定义header 是这样的需求，有一个web页面，里面图片的上传和预览来自于一个独立的文件服务器，对http的请求需要进行访问权限的设置，就是在请求的header里加一个Authorization的字段。上传好说我用的Axios直接添加一个header就行了，但是预览就比较麻烦了，因为img这个标签图片下载展示是浏览器自己实现的，没有办法去修改。所以首先想到就是通过...

VUE：vue3.x自定义上传文件的组件

干饭搬砖两不误。

07-29

1479

当ui框架的上传组件不能满足我们的使用需求，就需要自定义一个上传的组件

vue里＜img＞的src用变量代替后无法显示的问题

肖潇不写代码

06-06

1792

定义一个变量url： url: @/assets/ima/square/ <img :src="require(url)" class="image">

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

【03】的博客

11-28

9952

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

关于vue＜img＞标签参数传递资源路径

qq_53139716的博客

05-25

716

<img src="http路径是没错的">但是如果用到参数传递资源路径时无效正确的用法如下： onclick要使用@click

vue-cli构建的项目中图片路径以变量形式传入时显示解决办法

xm2by的博客

08-17

6852

vue-cli构建的项目中图片路径以变量形式传入时显示解决办法直接将图片路径以变量形式传入时，页面时显示不出来的解决方法：使用require对图片路径进行引用；参考文献 [1] vue-cil和webpack中本地静态图片的路径问题解决方案...

vue中解决动态赋值img路径的问题

weixin_45915554的博客

10-23

628

在开发一个列表组件时，图片需要由外部传入，一开始想把图片路径的字符串当作变量传入就好，写完发现并不能正确显示与将路径直接写入src的图片对比后发现，传入变量的图片并没有被webpack编译导致不能正确显示解决办法就是使用require函数把图片文件引入 require函数是node扽一个方法，用于引入模块json或者本地文件如果引入的是一个图片文件，那么函数返回的就是npm运行后的编译路径，也就解决了webpack不变量img的问题了参考文章：http://nodejs.cn/api/mod

Html中img控件的src属性

hurricane_li的博客

02-19

7315

方式一：直接给src属性一个服务器端资源的地址，img控件会自动获取并解析资源。方式二：当访问的资源不在工程路径下时，想到的办法是通过返回给img控件字节流，让img控件解析，开始直接将ajax异步获取的字节流设给了img的src属性，发现无法显示图片，通过http://blog.csdn.net/doulinxu/article/details/59636710的指点，完成通过给src属性赋予字...

关于在vue项目中img的src动态赋值问题

筱✿熙

04-20

1555

2.使用require，只能有一个变量（比如有多个变量，有运算，有方法，都不行）。vue项目中img的属性src动态赋值时。1.一般动态赋值时，要用require；正确编写如下图所示（容易被坑的地方）

动态给img的src属性赋值&Vue中通过document的getElementById()获取为空&Vue输入框中使用v-model导致number类型值自动转换成string

weixin_51097961的博客

07-03

3556

动态给img的src赋值&Vue中通过document的getElementById()(在使用canvas是用到)

vue-lazyload中文文档

06-08

这里的 imageSrc 是一个变量，它存储了图片的地址。当这个图片出现在可视区域内时，Vue-Lazyload 会自动加载它。除了基本的使用方式外，Vue-Lazyload 还提供了很多配置选项，使得你可以自定义加载行为。下面是一些...