vue踩坑笔记之src的动态绑定赋值问题

最新推荐文章于 2025-06-23 16:52:49 发布
原创 最新推荐文章于 2025-06-23 16:52:49 发布 · 2w 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在页面间传递包含图片URL的对象，并在目标页面正确显示图片的方法。通过调整图片URL的处理方式，确保Webpack能正确识别并编译图片资源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我的需求是这样的，在一个页面点击了路由器的链路，将某个对象传递给下一个页面，这个对象的其中就包含了一个{递减：''，IMG：''}这样的对象数组，我想在跳转的页面将这个IMG显示出来，于是我这样做：

在跳转的下一个页面接收这个数组DUI

在HTML中进行展示


赋值的语句并没有什么错误，

但是出现了下面的结果：


其中文字内容能够正常显示，说明传递的数据没有错

但是由于在div中显示之前，webpack并没有去编译我的desc.img

因此我找到原因如下：


原先考虑的是直接将URL传递过去就行，但是这导致这个图片根本不能被编译被识别，所以修改如下：


结果如下：图片正常显示


vue2学习笔记5 - 表单类元素的单向数据绑定和双向数据绑定
l_q_l的专栏
07-15 584
也就是说，使用v-model的input，实现了从vue模板与vue实例间的双向数据绑定。而v-bind，只能实现从data到页面的单向传递。但是，v-model也不是在任何地方都可以使用，它只能用于表单类元素（输入类元素）中，捕获用户输入，实现数据的双向传递。输入类元素包含：input，单选，多选、select控件、多行文本输入框等拥有value属性值的元素。所以，v-model:value也可以简写为v-model，因为v-model默认收集的就是value的值。
Vue2（12） 表单输入绑定学习笔记
反贪局
04-01 394
本文详细阐述了Vue2中表单输入绑定的基础用法、修饰符、特殊场景，并提供了丰富的代码示例。通过本文的学习，我们可以更加灵活地在Vue应用中使用表单输入绑定功能，提高开发效率和用户体验。
Vue.js 动态为img的src赋值方法
10-18
下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue | 动态绑定img的src属性
Tuan_Better的博客
01-18 1793
方法：字符串URL前加上require。
vue img src 动态赋值
最新发布
计算机辅助工程
06-23 575
标签的src属性赋值通常是通过数据绑定来实现的。你可以使用插值{{ }}，或者v-bind:src（简写为:src）来实现这一点。下面是一些示例来说明如何动态赋值给。标签的src属性赋值。你可以根据实际情况选择最适合你的方法。方法2：使用v-bind:src或:src。以上方法展示了如何在Vue中动态地给。动态从数据属性中获取URL。使用计算属性动态生成URL。在Vue中，动态地给。
vue2 和vue3动态绑定src
柑橘乌云_
03-25 2823
创建的vue2可以通过 require对图片进行动态绑定但vite创建的vue3则不可以通过require对图片进行可以通过一下方法进行绑定(注意vite根目录是，且vite会自动解析src中的字符串) 该方法在vue3中我并未测试，如果没效果 ，往下看其他方法。
vue中img的src动态赋值（require方法）
qq_45991812的博客
02-06 1万+
【代码】vue中img的src动态赋值（require方法）
Vue动态绑定img的src属性
锦瑟无十年丶的博客
01-18 1290
img图片路径：根据不同的状态显示不同地址 1. 利用import引入图片路径 编译时加载（效率更高）【由于是编译时加载，所以import命令会提升到整个模块的头部】 // 地址引入 import imgUrl from '@/assets/bg.png' // 计算属性 computed: { getImg() { // 条件判断，最后输出 return imgUrl } } // 页面引用 <img :src="getImg" alt=""> 2.
VUE3 学习笔记（3）：VUE模板理念、属性绑定、条件渲染、列表渲染
众纳百川的博客
05-24 427
VUE模板理念理解、VUE属性绑定、VUE条件渲染、VUE列表渲染
vue学习笔记之作用域插槽实例分析
10-15
`:item="item"` 使用具名绑定将当前循环项赋值给插槽。这样，当父组件渲染插槽时，就可以访问到这些数据。 在父组件的模板中，我们使用了 `<template>` 标签来定义作用域插槽，这里的 `{{props.item}}` 会替换为子...
Vue学习笔记之计算属性与侦听器用法
10-15
这两者都是Vue数据绑定系统的重要组成部分，有助于提高应用性能和代码可维护性。 1. 计算属性 计算属性是用来根据其他数据动态计算出新值的一种方式。它们是响应式的，即当其依赖的数据发生变化时，计算属性的值会...
Vue中src属性绑定的问题
热门推荐
林飞的梦呓
04-25 3万+
一、Vue中src属性绑定的问题 图片src属性未绑定的时候，相对路径为&quot;../assets/product.png&quot;，可以看到图片会在浏览器中渲染出来， 当以src属性绑定的时候 :src=&quot;{{ item.pro_img }}&quot;，浏览器报错。 productList: [ { ... // 'pro_img': '.....
【Vue】在vue-cli中绑定图片src属性
AC_greener的博客
08-12 1237
git推送项目到github的方法 在推送之前要配置一下git的用户名和邮箱（和github的邮箱一致） git config user.name “XXX” git config user.email “XXX@XXX.com” 在本地新建一个文件夹，进入文件夹，在命令行执行: git init 执行 git remote add origin https://github....
vue项目动态绑定图片的src属性
徐三岁的博客
09-11 829
<img :src="imgUrl"/> export default{ data(){ return{ imgUrl:'../../assets/01.png' } } } 这样写图片根本显示不出来，只是显示了个图片的标志 正确写法 export default{ data(){ return{ imgUrl:require('../../assets/01.png') } } } import imgUrl from '@/assets/01.p
vue中img动态绑定src(网络图片https,http)
weixin_43608950的博客
04-28 6473
vue中img动态绑定src(网络图片https,http)
vue image的src属性动态绑定以及渲染
weixin_67647268的博客
09-21 1075
name: "正常运行",name: "正常停机",name: "故障停机",name: "通讯故障",name: "检修模式",name: "急停",name: "警告",name: "过载",
动态绑定src路径，动态绑定class，取index值
m0_46567190的博客
05-12 294
动态生成的路径中加上require，可成功加载图片html：js:
vue2.0中动态绑定img的src属性的方法（三元运算）
simpleMan8023的博客
07-08 2447
函数在构建时会解析图片路径，并将图片打包到正确的位置。使用 require 可以确保路径在打包时正确解析。可以用于在运行时加载资源，但这种方法通常用于更复杂的场景，如按需加载模块。在标签里进行三元运算符判断的时候，引用地址外层需要加require()使用computed属性来动态计算img的src路径。/* 你的样式 */
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.js动态数据绑定详解与实现过程
Vue.js 的动态数据绑定是其核心特性之一，它允许数据与视图实时同步，提高了开发效率和用户体验。本篇笔记旨在帮助读者理解这一机制的实现原理，包括Dep、Observer、Watcher和Compile四个关键组件的协作。 首先，...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值