vue src 无法绑定的问题

最新推荐文章于 2022-08-03 02:07:03 发布

原创最新推荐文章于 2022-08-03 02:07:03 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了在Vue项目中使用webpack构建时，如何正确配置图片资源路径，避免因路径问题导致的图片加载失败。文章详细解释了静态路径与动态路径的区别，并提供了两种有效的解决方案：一是通过import导入图片，二是利用require函数动态获取图片路径。

 <img src="../assets/images/identity1.png" alt="图片加载失败" />

这样是可以的，但是如果写成动态的

<img :src="uploadIdentity1Src" alt="图片加载失败" />


  uploadIdentity1Src:"../assets/images/identity1.png",//身份证正面

这样就不行了，因为
http://192.168.1.8:2050/assets/images/identity1.png 在浏览器视察的时候，路径变成了这样，

其实真正的路径是这样的，vue 用webpack构建的时候处理，在打包的时候可以看到，就是在dist/img 这个路径下；处理成了打包后的路径，根目录就是dist
http://192.168.1.8:2050/img/identity1.a8b7de0d.png

解决方法：

1. import 引入

import one from '../assets/images/identity1.png'

2. require 引入 webpack 就是基于common.js 构建的

 <img :src="require('../assets/images/identity2.png')" alt="图片加载失败" />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蚁族的奋斗1

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

08-30

Vue中img的src属性绑定与static文件夹实例 Vue 中 img 的 src 属性绑定是指在 Vue 组件中绑定图片的 src 属性，以便正确地加载图片。但是在实际开发中，开发者可能会遇到图片加载失败的问题。本文将介绍 Vue 中 img...

解决vue2.0动态绑定图片src属性值初始化时报错的问题

08-27

解决Vue2.0动态绑定图片src属性值初始化时报错的问题标题：解决Vue2.0动态绑定图片src属性值初始化时报错的问题本文将讨论 Vue 2.0 中动态绑定图片 src 属性值初始化时出现的错误问题，并提供解决方案。描述：...

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

解决vue不能动态绑定src的问题

aa754403560的博客

06-07

317

由于前端工程化后会图片路径会被压缩，所以当图片src动态绑定时路径会变成不是自己想要的路径。解决方案是在想放置图片的位置放置一个div，将该div的背景设置成自己想要展示的图片。

Vue img的src使用数据绑定不显示

qy88666的博客

08-03

1273

不少人在vue的开发中遇到这样一个问题： img的src属性绑定url变量，然而图片加载失败。 <img src="{{ imgUrl }}"/> 原因：写法错误解决：应该使用v-bind <img :src="imgUrl"/> 但是有时这种写法图片也加载不出来原因：因为你的imgUrl使用了本地图片的路径。解决方案1：将图片放在src下的static文件夹内原理：用build打包后的dist文件夹下，文件的位置发生了变动，但是...

难点四！！！Vue中绑定属性无效

qq_41818857的博客

06-07

3667

1、坑一： Vue中绑定属性一般写法,如果属性值是字符串则不需要用v-bind绑定，直接在元素上加就行了，如果里面涉及到变量或者其他不是字符串的值，一定要用v-bind绑定，否则无效。 2、坑二：如何给class设多个值：错误写法： <div v-for="(item,i) in cityList" @click='select(i)' :class="{my-div active:activeIndex===i}"> {{item}} </div> 正确写法： &

vue动态引入src不生效的问题

weixin_44763349的博客

03-16

1604

html {{item.name}} js tabList:[ {name:'景区VR',url:require("../assets/images/tab-one.png")}...

vue src路径动态拼接无法生效

weixin_69943276的博客

08-03

523

路径动态拼接时使用${}拼接一直不起效果，跟着视频学的，开始时也尝试过用加号“+”拼接，但终究解决不了问题，百思不得其解，也有怀疑过是不是版本问题导致写法不一样，后来经过多种尝试发现了问题所在。把引号''改为tab键上的``符号即可。...

关于vue v-for循环解决img标签的src动态绑定问题

10-18

在动态绑定标签的src属性时，通常会遇到路径和上下文环境的问题。这主要是因为浏览器在加载图片时，需要根据当前页面的相对路径或者绝对路径来寻找资源。如果路径设置错误，浏览器无法找到资源，就会导致图片无法...

解决vuecli3中img src 的引入问题

10-15

在Vue CLI 3中，处理`img src`的引入问题主要涉及到项目中静态资源的管理。Vue CLI 3改变了之前的目录结构，导致一些在Vue CLI 2中可行的引用方式可能不再适用。以下是对这个问题的详细解答： 1. **在模板中直接...

vue :src 不显示的解决方案

weixin_46020146的博客

05-08

396

vue :src 不显示的解决方案

vue :src 不生效，解决：给＜img＞图片标签绑定src属性，图片无法加载

weixin_44817017的博客

03-08

4104

问题：使用:src绑定本地图片地址不生效本地图片的位置出现问题的代码： <img id="avatar" :src="imageLink"> data() { return { imageLink: '@/assets/img/avator.jpg' } } 页面上图片无法加载。方法一：使用require引入图片修改后的代码： <img id="avatar" :src="imageLink"> data() { return { im

前端图片src动态绑定失效，静态路径有用的问题

A444477的博客

11-09

1491

原因：图片在assets文件夹中的情况：项目编译过程中会被webpack打包处理编译为模块依赖，加载图片需要通过url-loader加载器实现，url-loader加载器解析不了动态绑定的src地址，因此动态绑定src需要通过加载模块的方法去加载图片，使用require（）。解决办法： ### 1、使用require请求模块 ### 2、将图片文件放在static文件夹下，不会被打包如下图： ...

Vue中src属性绑定的问题

林飞的梦呓

04-25

3万+

一、Vue中src属性绑定的问题图片src属性未绑定的时候，相对路径为"../assets/product.png"，可以看到图片会在浏览器中渲染出来，当以src属性绑定的时候 :src="{{ item.pro_img }}"，浏览器报错。 productList: [ { ... // 'pro_img': '.....

【Vue】vue中img的src属性绑定问题

最新发布

03-02

### Vue3 中 `<video>` 标签绑定 `src` 属性失败的原因在 Vue3 项目中，当尝试动态更新 `<video>` 标签的 `src` 或者 `<source>` 元素的 `src` 属性时，可能会遇到视频不刷新的问题。这主要是由于 Vue 的虚拟 DOM 更新机制导致浏览器缓存了旧的视频资源[^1]。 ### 解决方案 #### 方法一：强制重新加载视频为了确保每次 `src` 变更都能触发视频重载，在变更 `src` 后调用视频对象的方法可以实现这一目的： ```javascript // 假设 videoRef 是 ref() 定义的响应式变量指向 <video> 元素 const updateVideoSrc = (newSrc) => { nextTick(() => { const player = videoRef.value; if (!player) return; // 设置新的 src 并立即停止当前播放 player.src = newSrc; player.load(); // 强制重新加载媒体文件 // 如果需要自动播放则取消注释下面一行 // player.play(); }); }; ``` 此方法利用了原生 HTMLMediaElement API 来手动控制视频的行为，从而绕过了可能存在的缓存问题[^3]。 #### 方法二：使用 key 属性重建组件实例另一种有效方式是在模板中的 `<video>` 标签上添加一个唯一的 `key` 属性，并将其绑定到数据模型上的某个字段。每当该字段变化时，Vue 将销毁并重新创建整个 `<video>` 组件及其子节点，进而达到清除缓存的效果。 ```html <template>  <video :key="uniqueKey" controls> <source :src="videoUrl" type="video/mp4"/> Your browser does not support the video tag. </video> </template> <script setup> import { computed, ref } from 'vue'; let uniqueKey = ref(0); const changeVideoSource = () => { uniqueKey.value += 1; // 更改 key 触发重新渲染 }; defineProps({ videoUrl: String, }); </script> ``` 这种方法简单高效，适用于大多数场景下的需求。 ### 注意事项对于某些特定情况下（如 RTSP 流），还需要考虑其他因素可能导致视频无法正常播放，比如网络延迟、权限验证等问题。如果涉及第三方服务提供商，则需遵循其官方文档指导完成集成工作[^4]。