vue项目中本地图片动态绑定img的src属性解决方案

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

#vue.js #javascript #html #css3 #css

本文介绍如何在项目中将本地图片动态绑定到img的src属性，包括将图片作为模块引入及在不同模式下确保图片资源路径正确的方法。

本地图片动态绑定img的src属性

在这里插入图片描述

1 将图片当成模块先引进来，再绑定

在这里插入图片描述

2本地静态资源加载

将所有的静态图片资源放在和src同级目录下的static文件夹下
在这里插入图片描述
路径可以写成自然的’…/…/static/img/xxx.png’ 也可以按照红框中的写法（这种写法对应的是编译后文件的目录）
在这里插入图片描述
这样按照平常的动态绑定src属性你的图片路径在开发模式下和生产模式下的图片资源路径都是不会出问题的

Thurmanwang
关注
解决vue2.0动态绑定图片src属性值初始化时报错的问题
08-27
本文将讨论 Vue 2.0 中动态绑定图片 src 属性值初始化时出现的错误问题，并提供解决方案。 描述：在 Vue 2.0 中，经常会使用类似这样的语法 `v-bind:src = " imgUrl "`（缩写 `:src = " imgUrl "`）来绑定图片的 ...
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中动态引入图片时，常常会遇到图片资源无法被正确加载，浏览器显示404错误的情况。这个问题在项目中使用了动态路径来加载图片资源时尤为常见。本文将从以下几个方面深入探讨这个问题，并提供一个解决...
vue中img动态绑定src(网络图片https,http)
weixin_43608950的博客
04-28 6579
vue中img动态绑定src(网络图片https,http)
vue img src 动态赋值
计算机辅助工程
06-23 816
标签的src属性赋值通常是通过数据绑定来实现的。你可以使用插值{{ }}，或者v-bind:src（简写为:src）来实现这一点。下面是一些示例来说明如何动态赋值给。标签的src属性赋值。你可以根据实际情况选择最适合你的方法。方法2：使用v-bind:src或:src。以上方法展示了如何在Vue中动态地给。动态从数据属性中获取URL。使用计算属性动态生成URL。在Vue中，动态地给。
vue图片地址动态绑定
qq_42594589的博客
04-28 372
vue 动态绑定图片地址不显示问题 当在给数据 设置绝对路径或者是相对路径时应该使用require引入才能成功 eg: ( this. MyimgSrc = require(‘…/…/assets/jd/market/img/temp/icon_yj.png’) )
img使用 :src 动态绑定图片地址，图片不成功
m0_67880202的博客
04-12 1220
此时图片没有出现，控制台报错 http://localhost:8080/assets/animals1.jpeg 404 (Not Found)使用vue cli 创建的vue2项目，项目中想实现轮播效果。使用require引入图片，完整代码如下，此时图片引入成功。使用 :src 动态绑定图片地址，图片没有出现。此时控制台中出现的图片地址是。
vue src动态赋值本地图片遍历不显示问题解决办法
weixin_46027556的博客
10-13 1032
图片放在src同级的static文件夹下。
解决Vue动态加载本地图片问题
10-16
本文将详细讲解如何解决Vue中动态加载本地图片的问题，以及两种不同的实现方式。 首先，我们遇到的问题是当尝试使用`v-bind`（简写为`: `）动态绑定`img`标签的`src`属性时，图片无法正常显示。原因是浏览器没有...
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
10-15
当在Vue组件中动态设置img的src属性，例如`<img :src="&#39;../../static/images/orderSeeProgress&#39;+index+&#39;.png&#39;">`，在开发环境中可能一切正常，但在`npm run build`之后，浏览器可能会报`xxxxxxx ...
vue使用本地图片
qq_41769047的博客
12-11 639
vue中要使用本地动态图片直接写相对路径不会生效，得用require引入， <!--静态直接引入--> <img src='../../../assets/skipPage.png'/> <!--动态require引入--> <img :src=img /> data() { return{ //相对路径 img:require("../../../assets/skipPage.png") }
vue动态加载图片src
qq_41818857的博客
05-07 821
场景描述 我需要根据后台返回的某个字段标示渲染某个图片，也就是src的路径是动态的不是写死的 放在assets目录 错误写法： <img :src="./assets/images/'+item+'.jpg' " /> 结果不起作用，其实不是不可以放在assets目录下，只是放在assets目录下代码写法有所不同 正确写法： <img :src="require('../assets/images/'+img+'.jpg')"/> 放在static目录 放在static目录下，
Vue.js中使用img标签src动态绑定图片地址
weixin_42864357的博客
06-27 2921
img标签 imgAddress为data中的变量，动态绑定到src上 <img :src=imgAddress> data写法如下： data() { return { imgAddress: require('../../assets/Income.png'), } } 获取图片要使用require（url）进行获取。 ...
vue中img的src动态赋值（require方法）
qq_45991812的博客
02-06 1万+
【代码】vue中img的src动态赋值（require方法）
vue中动态绑定本地图片:src的坑
GreyCastle的博客
06-30 2162
前言： 前端开发中，有时候我们要使用本地图片，今天我就入坑了。在保证路径的正确下，动态绑定就是不会加载图片。 效果图 解决办法：两种 ①： ②： 看网上说的还可以使用@进行找到根路径，我试了好多次不行（报错）--希望大佬们请教下：我感觉不是我路径问题啊 就这这样： ...
vue 动态加载图片src的解决办法
weixin_43755104的博客
08-14 681
场景描述 我需要根据后台返回的某个字段标示渲染某个图片，也就是src的路径是动态的不是写死的 放在assets目录 一般常见的错误就是直接把图片放在assets目录下，直接写 :src="'./static/iconLeft/product-top-logo'+item.orderNum+'.png'" 报错，不是不可以放在assets目录下，放在着目录下代码写法有所不同 <img :src="require('../assets/images/'+imgsrc+'.png')"/>
img标签的src属性动态绑定图片
热门推荐
摸鱼小队
05-13 1万+
实现方法 html代码： <img :src="_img1" alt="" class="imgs"> <img :src="_img2" alt="" class="imgs"> js代码： computed: { // 1、网络图片 _img1() { let arr = `https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F4c%2Fa
Vue 图片引用方式详解：静态资源与动态路径访问
码农研究僧的博客
02-03 3760
在 Vue 开发中，图片的引用方式主要取决于图片存放的位置，常见的存放方式包括： 存放在 public/ 目录 存放在 assets/ 目录 存放在远程服务器 动态拼接图片路径
vue动态绑定video的src，本地路径
weixin_45235942的博客
08-12 4150
在网上百度了很多方法都说要使用vue的$refs，但是我的问题与网上百度出来的问题不同，需要使用require包住地址，是因为，我的地址是本地的，本地的视频地址要和图片一样包起来才能看见 下面是我的代码 <template> <div style="width: 500px; margin: 0 auto;"> <video :src="url" style="width: 200px; height: 300px;" controls></video&
关于Vue的“：src”绑定静态图片的问题
Fairy的博客
09-29 2277
今天遇到一个问题，是关于在Vue的img标签中，使用：src绑定本地静态资源图片的操作 我开始在data（）中这样写的，并没有把图片加载出来： imgUrl: ('../../../assets/Ima-swiper/swiper4.jpg') 效果如图： 随后，代码改为： imgUrl: require('../../../assets/Ima-swiper/swiper4.j...
vite+vue3项目中得img标签src属性的动态绑定
最新发布
06-26
我们正在处理Vite+Vue3项目中动态绑定img标签src属性的问题。根据引用内容，我们可以总结出几种方法：引用[1]提到在Vue3+vite中使用require的方式，但需要注意：Vite本身不支持require，因为Vite是基于ESM的构建工具...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值