vue img :src拼接问题

最新推荐文章于 2025-09-09 18:01:58 发布

原创最新推荐文章于 2025-09-09 18:01:58 发布 · 8.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#总结

问题总结专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue项目中使用计算属性动态生成图片路径。通过示例代码展示如何结合token和item变量，拼接出完整的图片URL，实现图片的正确加载。

在vue项目中，一个图片的路径需要有多个字符串、变量拼接产生，直接写进去的时候会报错，利用vue的计算属性来解决这个问题：

<img class='reason-img' v-for='(item,index) in value' :key='index' :src='getImgUrl(token,item)'>

 methods: {
        getImgUrl(token,item){
            var url = 'https://api.weixin.qq.com/cgi-bin/media/get?access_token='+token+'&media_id='+item;
            return url;
        }
 }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

皮皮猴我们走

关注关注

0
点赞
踩
7

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

图片img标签 src拼接路径问题

weixin_45932157的博客

01-16

3971

刚接触vue,v-for中获取字段都很正常，但是中的路径不知道怎么拼接。还是我张哥出马，一个赶俩。废话少说直接上代码。在vm实例中的data加上url:window.fileUrl,获取路径，然后在拼接。 vue <div class="people_up block_hover" v-for="(item,index) in peopleArr" :key='item.rowId' @click="Lclick(item.rowGuid)">

Vue 中动态拼接图片 src 地址

ZhouHui优快云

06-13

1512

Vue 中动态拼接图片 :src 地址用 js 动态加载 assets 或者本文件的图片出现404的状态码代码示例： <ul> <li v-for="(item,index) in list" :key="index"> <img :src="getImgUrl(item.imgurl)" alt="" /> //这里给图片一个绑定一个方法，并传参 </li> </ul> //js代码: methods:{

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

2 条评论

萌萌小白鲨 2020.10.22
thank you

vampirehll 2020.04.30
为啥不起作用

react 中img标签src字符串的拼接问题

weixin_51761059的博客

12-24

2348

需要根据变量item.coverImg而变化的src的拼接实现如下 <img src= {‘http:example.com’+ item.coverImg } alt="" /> alt=""表示图片未加载成功时将不会有任何显示

【Vue3】03-编写app组件——src

热门推荐

一键写代码的博客

06-17

2万+

很常见的需求了。根据后台返回的数据，展示本地对应的图片。这个时候，需要对图片地址的src进行拼接。由于静态资源路径，在vue的template和script中引入是有区别的。方式不对，很容易导致地址有问题。 1、方式一： <template> <div v-for="(item,index) in menus :key="index> <img :src="require(`../../assets/images/${item.icon}`)" /> <span&

vue动态拼接图片路径、img地址拼接问题 [模板字符串]

mizuhokaga的博客

06-03

1万+

写vue写的不多,记录一下这个小坑知识点:es6模板字符串${} (一)需求: 根据后端传的json数组的某一字段来拼接img的src路径,动态的绑定img标签的图片,图片来源本地文件夹,如果直接利用+和{{}}来拼接路径,该路径会被加载器解析成字符串 ↓json格式:根据不同的e_status拼接不同的图片 ↓本地文件夹的图片(titleicon.ico没有使用不用管) (二)解决方案利用ES6的模板字符串进行拼接操作模板字符串使用反引号 (`) 来代替普通字符串中的双引号和单引号。模板字

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

10-18

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

Vue中图片Src使用变量的方法

10-16

<img :src="imgSrc" /> export default { data() { return { imgSrc: '../../static/images/web_bg.png' } } } ``` 当项目经过打包（例如使用Webpack）后，静态资源路径会自动加上hash值，导致原来的相对...

【Vue】img使用 :src 动态绑定图片地址，但是加载图片不成功

weixin_57509111的博客

05-20

1756

img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。引入才能成功，就可以动态使用了。设置绝对路径或者相对路径是改为用。动态地址，路径被加载器解析为。

拼接img标签src

Mr_ZhangAdd的博客

01-09

2812

"data": function (e) { if (e.packageThumbUrl != null && e.packageThumbUrl != "") { var imgurl= "http://47.100.245.18"+e.packageThumbUrl; ...

Vue中img的src需要动态拼接字符串

weixin_51248307的博客

01-10

1167

如果不想导入require包裹，可以使用es6的语法。

VUE解决图片src路径失效，以及使用变量动态拼接图片路径

优快云wangyi的博客

12-06

1634

话不多说，直接上代码做参考。

vue :src 三目运算符拼接变量

我爱美女S的博客

11-03

1574

vue :src 三目运算符拼接变量

vue img src 拼接绑定

zhongmei121的专栏

05-23

2487

baseUrl=“../assets/iconImg/” 这样写图片显示不出来，并报错Cannot find module '../assets/iconImg/zhiliang8.png' <img v-if="subItem.icon" :src="require(`${baseUrl}${subItem.icon}`)" width="45" height="45"> ...

Img标签的src地址自动拼接本地域名（localhost:8080）导致图片不显示问题

yue200403的博客

09-01

5805

Img标签的src地址自动拼接本地域名（localhost:8080）导致图片不显示问题

img标签地址src路径拼接_微信小程序中image组件src路径拼接字符串的问题

weixin_36184835的博客

01-27

4913

微信小程序中image组件src路径拼接字符串的问题最近在做微信小程序毕设，涉及到远程图片显示，一开始我是这样写的：index.js文件中onLoad: function () {this.setData({imgurl:app.globalData.imgurl})}index.wxml文件中但是控制台老是报错说找不到本地图片：VM12083:1 Failed to load local ima...

给img 标签拼接src

xiaoqing19910812的博客

12-10

1万+

方法一 <img src="http://zhdjapp.smartont.net:18080/pages/houseimages/${firstTestData.imgName}"/> 方法二 var lastImg='${lastTestData.imgName}'; var lastImgUrl="http://zhdjapp.smartont.net:18080/page...

vue img的src动态拼接

06-06

<think>我们正在解决Vue中动态设置img标签的src属性的问题。根据引用，有几种方法可以实现动态绑定，特别是当路径是动态生成的时候。以下是一些常见场景和解决方案：###1.动态路径拼接（基于文件路径）当图片存储在项目的`assets`或`public`目录时，需要根据变量动态加载不同图片。在Vite项目中（Vue3默认使用Vite），推荐使用`newURL`方式：```vue<template><img:src="getImageUrl(imageName)"alt="动态图片"></template><scriptsetup>constimageName=ref('example.png');constgetImageUrl=(name)=>{returnnewURL(`./assets/${name}`,import.meta.url).href;};</script>```-`import.meta.url`：当前模块的URL（在开发和生产环境都有效）-`./assets/${name}`：相对于当前模块的路径[^2][^4]###2.条件显示图片（包括默认图片）当需要根据条件（如用户头像是否存在）显示不同图片时：```vue<template><img:src="userAvatar"alt="用户头像"></template><scriptsetup>import{computed}from'vue';importdefaultAvatarfrom'@/assets/default-avatar.png';constuserInfo=ref({avatar:''});//假设用户数据//计算属性处理头像constuserAvatar=computed(()=>{returnuserInfo.value.avatar||defaultAvatar;});</script>```**注意**：如果动态路径来自用户输入（如上传的头像URL），则需要直接使用字符串：```vue<img:src="userInfo.avatar||defaultAvatarUrl">```###3.Webpack环境下的require方案（Vue2/VueCLI）如果使用Webpack构建（如VueCLI创建的项目），可以通过`require`动态引入：```vue<template><img:src="require(`@/assets/${imageName}`)"alt="图片"></template>```**限制**：-路径必须是静态字符串（不能完全动态）-适合基于固定目录的动态文件名[^3]###4.解决图片不显示问题常见问题和解决方案：-**问题1**：路径正确但图片不显示-原因：Vite不解析动态字符串作为模块（如`:src="path"`直接绑定变量）-解决：使用`newURL`或别名转换[^4]-**问题2**：生产环境图片路径错误-原因：开发环境和生产环境路径差异-解决：使用`public`目录存放静态资源（直接通过`/img.png`引用）###5.最佳实践总结|场景|推荐方法||--------------------|----------------------------||动态文件名|`newURL(路径,import.meta.url)`||默认图片|计算属性+静态导入||Webpack项目|`require`语法||完全外部URL|直接绑定字符串|>⚠️注意事项：`public`目录下的文件不会被构建工具处理，直接复制到输出目录。引用时使用绝对路径（如`/img/logo.png`）[^1]。###示例：结合条件与动态路径```vue<template><img:src="avatarImage"alt="用户头像"></template><scriptsetup>import{ref,computed}from'vue';constuserId=ref(123);consthasCustomAvatar=ref(false);constavatarImage=computed(()=>{if(hasCustomAvatar.value){//用户自定义头像（存储在assets/custom/）returnnewURL(`./assets/custom/${userId.value}.jpg`,import.meta.url).href;}//默认头像（作为模块导入）returnnewURL('./assets/default.jpg',import.meta.url).href;});</script>```###相关问题1.Vue3中如何正确引入public目录下的图片？2.Vite打包后动态图片加载失败如何解决？3.Vue中如何实现图片懒加载的动态绑定？</think> 以下是在 Vue 中动态拼接 `<img>` 标签 `src` 属性的完整解决方案，结合了 Vue 的特性和多种实际应用场景： ### 一、Vue 动态设置 img src 的 4 种方法 #### 1. 使用 `new URL` (推荐方案) Vue3/Vite 项目首选方案： ```vue <template> <img :src="getImageUrl('avatar.png')" alt="用户头像"> </template> <script setup> const getImageUrl = (name) => { return new URL(`../assets/images/${name}`, import.meta.url).href; }; </script> ``` - ✅ 优点：支持动态路径拼接、开发/生产环境自动适配 - ⚠️ 注意：路径需从项目根目录开始拼接[^2][^4] #### 2. 使用 `require`（Webpack/Vue CLI 项目） ```vue <template> <img :src="require(`@/assets/${imagePath}`)" alt="动态图片"> </template> <script> export default { data() { return { imagePath: 'products/phone.jpg' } } } </script> ``` - ✅ 优点：Webpack 自动处理模块依赖 - ⚠️ 限制：路径必须是相对路径，不能使用变量拼接前缀[^3] #### 3. 使用静态导入 + 计算属性 ```vue <script setup> import defaultAvatar from '@/assets/default-avatar.jpg'; const user = ref({ avatar: null }); const avatarUrl = computed(() => user.value.avatar || defaultAvatar ); </script> <template> <img :src="avatarUrl" alt="用户头像"> </template> ``` #### 4. 动态拼接远程 URL ```vue <template> <img :src="`https://cdn.example.com/${userId}_profile.jpg`" alt="远程图片"> </template> ``` ### 二、常见场景解决方案 #### 场景 1：条件显示默认图片 ```vue <template> <img :src="user.avatar || defaultAvatar" alt