vue 动态绑定文件地址 :src=“logo“ 不生效，针对需要计算的文件地址

最新推荐文章于 2024-05-07 23:34:54 发布
最新推荐文章于 2024-05-07 23:34:54 发布
阅读量315 收藏
点赞数
文章标签： Vue require 静态资源 前端开发 图片加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40902181/article/details/119420933
版权

<img v-if="logo" :src="logo" class="sidebar-logo">

logo: require('../../../assets/portal/logo.png')  使用require即可

 

 

 

ii窝窝头
关注
vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决
weixin_39917811的博客
12-22 3439
Vue中img的src是动态渲染时不显示的解决今天在项目中遇到一个需求，设计稿如下就是展示用户头像，数据从后端获取，要是没有拿到则显示默认图片。项目采用vue开发，本人也是第一次在实际项目中使用vue。自然而然采用条件渲染，我的代码如下：保存运行查看，发现没显示默认的图片，审查元素发现图片没有被打包有点懵~后来查阅资料发现图片使用require引入即可，更改后代码为：搞定~以上这篇Vue中img的...
vue.js最全知识点 & 数据动态绑定 & 数据双向绑定 & 类的绑定 & v-if & v-for & 单选与多选框 最齐全的vue.js代码
longlong6682的博客
04-12 1516
目录： 1. vuejs简介 2. 选择器：根据id、class等查找 3. 静态绑定数据 data 4. 插值 {{}}单项绑定 5. 数据动态绑定：computed 6. 数据双向绑定 ：v-model 7. 类的绑定：绑定事件触发时改变 class, id属性 8. 样式的绑定 v-bind:style 9. v-if 条件模板指令 10. v-for循环语句 11. 自定义指令 12. ...
解决vue动态设置img的src无效
np918的博客
07-30 3318
<img class="logo" :src="logo"> export default{ name:"xxx", data(){ return{ logo:require("./../static/images/logo.png") } } }
在vue中，＜img :src=“./logo.png“ alt=““ /＞不显示的原因
最新发布
2301_76633800的博客
05-07 517
在vue的项目中，webpack使用的是vue-loader，在编译过程中，所有的资源路径例如 、background: url(...) 和 @import 会作为模块依赖。今天写vue项目中，在动态渲染拿到的数据时，其他数据都可以渲染出现，就是图片不能出现。而动态加载图片，图片的地址无法被解析，因此最终没有被打包到文件中，找不到该图片。一开始找了许多相关的文章，就是没有相关的解决问题，知道找到。
#Android学习#android:src=""的用法
Bai HongHua的博客
09-20 1万+
2016年 09月 20日 星期二 16:21:50 CST 环境：Android Studio<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/button_selector"/>
关于路径src=“ “目录的表示方法（相对路径和绝对路径详细用法）
Hrenhua的博客
03-11 2万+
在web开发和java动态工程开发的过程中，我们难免遇到目录的路径问题的困扰，今天我给大家和自己总结了一下，资源引用中src="**"的表示方法，在IDEAL,和eclipse,和WebStorm开发中都适用。 在Web开发中，一般资源引用都要用src=URL,来导入我们的资源，如html中的img的用法，<img src="*.jpg"> 下面是一些目录的表示方法： 1、如果是在当前目录：（相对路径） URL=“资源” 即可 比如，我在写的3-11-1.html文件，要导入jq里面的包，3-
img标签前面加冒号:src和src的区别
苦苦思索的吃瓜群众博客
09-10 3886
img标签前面加冒号:src和src的区别 最近写vue，发现img标签里面经常有:src， 不知道这两者有什么区别 比如这种 <img v-if="loaded" :src="result.message"> 看了下加了冒号表示:src后面的字符串当做变量解析使用 而这种常规写法，就是当字符串使用 <img v-if="loaded" src="result.message"> 区别很小，需要注意一下 ...
Vue2学习笔记
lhg13592807238的博客
07-16 568
化他人笔记为自己笔记，本文根据其他博主笔记删减整合为适合自己的笔记，勿喷。自己看的没有很细心排版，勿喷
JS中引用百度地图并将百度地图的logo和信息去掉
10-26
在JavaScript（JS）中引用百度地图并去掉其Logo和信息是一项常见的需求，但需要注意的是，这样做可能违反了百度地图的服务条款。尽管如此，为了技术学习和理解，我们可以探讨一下如何通过CSS覆盖方法来实现这一效果...
vue基础学习复习笔记(一)，包括（vue基本概念、@vue/cli脚手架、vue指令、过滤器、计算属性、侦听器等基本概念）
weixin_60896381的博客
07-10 1184
本文包含 vue基础 等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（vue基本概念、@vue/cli脚手架、vue指令、过滤器、计算属性、侦听器等基本概念） 如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正.........
vue3动态引入图片(:src)
Mr-yang的随笔
10-27 8226
vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题。实际上我们不希望资源文件被wbpack编译可以把图片放到public 目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致，这点跟webpack是一致的。我们的目标静态文件在 src/assets/images/home/home_icon.png。
Vue中src属性绑定的问题
林飞的梦呓
04-25 3万+
一、Vue中src属性绑定的问题 图片src属性未绑定的时候，相对路径为&quot;../assets/product.png&quot;，可以看到图片会在浏览器中渲染出来， 当以src属性绑定的时候 :src=&quot;{{ item.pro_img }}&quot;，浏览器报错。 productList: [ { ... // 'pro_img': '.....
HTML基础-05-图片（引用图片src=“图片地址“、图片位置 align=“位置“、浮动图片 style=“float:位置“、图片链接 href=“目标url“、图形映射）
运维玄德公
03-16 2705
1. 引用图片（src="图片地址"） 语法示例 完整示例 2. 图片的位置（align="位置"） 语法示例 完整示例 3. 浮动图片（style="float:xxx"） 语法示例 完整示例 4. 图片的链接（href="目标url"） 语法示例 完整示例 5. 创建图形映射 语法示例 完整示例...
Vue中img动态拼接:src图片地址
IT13333的博客
10-11 4072
Vue中img动态拼接:src图片地址 使用场景：根据后端返回图片标记来匹配本地图片资源 例如：根据后端返回k1标记，前端生成assets/images/inventory/k1.png图片资源路径 <template> <div class="fl"> <img :src="getImgUrl(gatherInfo.img1)" alt=""> <img :src="getImgUrl(gatherInfo.img2
vue的v-系列事件
weixin_55101030的博客
10-09 886
vue的v-系列事件
关于Img标签绑定:src不显示图片
热门推荐
想搞全栈的前端
07-31 3万+
问题 如下图所示动态绑定src，不显示图片，将路径换成网络图片地址又可以显示 解决方法 引用本地图片需要加上require，使用require定义之后，就可以动态使用了，不用require你就只能写死的。不用 :src="’…/img/image.jpg’" 会被解析为字符串 ...
Vue 绑定图片Src路径的几种方式
林中明月间丶
09-24 1万+
//直接写路径 <img src="@/assets/logo.png" alt=""> //绑定： <img src="@/assets/logo.png" alt=""> background: url('~@/assets/images/quanbg.png') no-repeat center; <li v-for ="item in images" :key="i"> <img :src="item" alt=""> &l..
Vue-学习笔记-06 v-if详解
欢迎访问我的主页：https://www.bookbook.cc
07-25 2万+
文章目录一、Vue中的v-if 和 v-show1.1 v-if 决定是否渲染 基本使用：1.2 v-show 决定是否显示1.3 v-if 和 v-show的区别1.4 v-if 根据成绩返回评价二、小案例 点击切换登录的类型 一、Vue中的v-if 和 v-show v-if、v-else-if、v-else 这三个指令与JavaScript的条件语句if、else、else if类似。 Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件 v-if的原理： v-if后面的条件为fals
动态设置src路径
一路从容
08-05 2149
<img :src="logo" class="sidebar-logo" v-if="logo" /> data() { return { logo: require('@/assets/dt_logo.png') } } 如上动态设置图片的路径需要使用require()，不然只能写上固定路径如下 <img src="@/assets/dt_logo.png" class="sidebar-logo" /> 原因
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值