vue img设置动态地址

最新推荐文章于 2025-05-27 21:49:35 发布

原创最新推荐文章于 2025-05-27 21:49:35 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #动态图片

随笔&笔记同时被 2 个专栏收录

26 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

本文介绍了一种根据文件名动态渲染图片数组的方法，通过在HTML中使用v-for指令遍历图片列表，并结合相对路径引用static文件夹下的图片资源，避免了图片被打包时产生的hash问题。

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

需求：根据文件名动态渲染一个图片数组

          <ul>
            <li v-for="(item, index) in assetTotal" :key="index">
              <img :src="'/static/b/' + item.symbol + '.png'"/>
            </li>
          </ul>

把图片放在更目录下的static文件夹下，然后使用相对细致，原因：static文件夹不会被webpack打包，路径也简单

assets文件夹里面的图片会被打包，加上了hash所以没用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

watts_j

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用vue实现通过变量动态拼接url

10-15

主要介绍了使用vue实现通过变量动态拼接url，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue动态设置img的src路径实例

10-18

在Vue.js中动态设置img元素的src属性是前端开发中常见需求之一，尤其是当需要从不同来源动态加载图片资源时。在传统的Web开发中，图片的src属性直接指向图片的地址即可，但在Vue这样的单页应用（SPA）框架中，动态...

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

vue的img使用动态路径

Dark_programmer的博客

03-17

3225

img动态路径网络资源路径 & 本地静态资源路径有的时候业务需求，是动态切换图片。而图片资源，有的时候是来自CDN托管资源的，有的时候是本地public存储的。整理了一下代码，接下来稍微分别展示一下网络资源路径 & 本地静态资源路径 html布局  <p> src 动态网络路径 <el-button @click="changeSrc('online')">切换</el-button> <

vue使用图片的四种类型

最新发布

weixin_42339193的博客

05-27

802

本文总结了Vue项目中图片加载的6种实现方式：1）静态图片使用普通img标签；2）动态图片使用:src绑定；3）webpack打包图片通过require引入；4）封装自定义图片组件处理加载状态；5）SVG矢量图标直接引入或使用组件；6）性能优化采用懒加载技术。文章详细介绍了每种方式的特点、适用场景和具体实现代码，并对比了不同场景下的推荐写法，为Vue项目中的图片处理提供了全面的解决方案。

Vue为<img />绑定动态url

tpf1220的关于前端的技术的比较浅显的健谈

11-10

1万+

在为img元素设置动态的url时，遇到了问题： <img v-for="item in 10 " :key="item" src="item.png"/>原本意思是，根据item 然后通过字符串拼接，形成一个地址，但是我试了很多方法都不得行： <img :src={{item + '.png'}}/> <imt :src="${

Vue.js 为 img 标签设置动态URL

qq_38486568的博客

02-01

6687

在动态获取到一个图片的 url (形如http://10.0.0.1:XXXX/home/1.png)之后,应该如何将它动态的与img标签绑定在一起,网上的方法不是很精炼,所以我写了一段简单的代码. <template> <div id = "001"> <img :src = "this.sfile"/> </div> </

vue3 动态获取图片地址

sj18838107211的博客

04-09

1238

vue3 动态获取图片地址

vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

11-20

动态设置img的src属性无效，而直接写可以解决办法： imgSrc写成require(‘path’)；原因：动态添加src被当做静态资源处理了，没有进行编译 npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND 解决...

Vue.js 动态为img的src赋值方法

11-28

在模板中，我们可以通过Vue的`v-bind`或简写`:src`来动态设置`img`的`src`属性。有几种不同的方法可以实现这个需求： 1. **使用三元运算符**：在`<img>`标签中直接使用三元运算符进行判断： ```html <img :...

vue3：img使用方法设置动态路径

1111111111

04-05

1579

特别要注意，在get方法里，不要return路径，然后试图把路径直接传给html里的require，这种方式会报错，必须得在html里拼接路径。我的情况特殊在icon的名字需要通过方法获取，不是简单的设置成element.icon就可以的。网上有很多方法，试了一遍，只有下面这种方法是最简单并且合适我的。

vue3: img标签src属性动态设置资源路径

XL_0502的博客

08-16

7474

vite中默认支持ESM方式加载模块，没有require相关方法。补充两个方法。方法 require()Node.JS 原生方法，以CommonJS方式加载模块/文件/图片；Webpack 默认支持，Vite不支持；方法 require.context()Webpack 特定方法，此方法可实现自定义上下文；Vite不支持；

Vue中img的src是动态渲染时不显示的解决

10-15

今天小编就为大家分享一篇Vue中img的src是动态渲染时不显示的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue3.0标签img图片路径使用变量形式动态引用

Andrew Liu的博客

05-28

3629

把图片放在前端项目里，怎么动态地使用变量形式引用呢？经过：这个问题困扰了我好久呀！网上搜索了一大堆答案，都是require，import啥的，都没解决我的我问题啊。还有一种方法是使用网络地址，使用域名访问。还是算了，太麻烦了。问了一些我的同学，他们用的是vue2.0，图片放在static里就可以正常使用。但是3.0版本没了这个static，手动创建static是不行的。原来vue2.0的static文件夹变成vue3.0的public了。在 public 文件夹的静态资源，会被简单的复制到编译后的

Vue循环动态获取图片的URL

qq_54855933的博客

07-02

794

如果你在Vue CLI项目中，并且图片存储在src/assets目录下，你应该使用Webpack的别名@来引用它们。：你可以使用require或import在JavaScript中导入图片，并将结果存储在data中。'@/assets/images/FlightInspection/工作台.png''@/assets/images/FlightInspection/大屏板.png''@/assets/images/FlightInspection/小程序.png'

（已解决）VUE img标签的路径动态绑定，require为什么不直接使用变量接收地址

BrianGriffin的博客

01-21

796

当你数据库中传输的为地址，在vue的img标签中会被解析为字符串，所以地址不会起作用，自然无法渲染出来（可能产生的其他问题：由于地址为你的数据，所以一个模块无法渲染，有可能使其他的模块渲染失败）使用字符串拼接，前面为你的资源的固定路径，后面传输的数据改为最前面图正确传输的数据，从而避免问题产生。问题：红框图片无法显示（图片为已解决，所以显示了）后端传输到前端的数据：（img数据原本为地址）建议把底下所有回答看完，后面的回答有详细解释。

动态绑定属性

qq_33879627的博客

09-21

3390

（四）动态绑定属性 4.1 v-bind的基本使用某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:sr

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

热门推荐

mizuhokaga的博客

06-03

1万+

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

vue中img动态拼接本地地址方法

weixin_45847765的博客

03-08

1568

webpack可以直接用require()来导入，不需要多写一个函数了，这里就不写代码了。在vue中使用img进行动态拼接本地地址时会发现不能直接拼接，然后就可以用到以下办法。这是官网推荐的写法，有兴趣的可以直接查看vite官网的静态资源处理。

动态绑定img

xinscc的博客

04-02

342

今天在vue的开发中， i动态绑定mg的src属性绑定url变量，然而图片加载失败。如果require报错，可以看这篇文章解决。看着并没有问题，但是并没有显示出图片。经过一番查找后，了解到，

vue img标签设置动态路径

05-13

可以使用Vue的绑定语法，将路径作为一个变量绑定到img标签的src属性上。例如： ```html <template> <div> <img :src="imageUrl"> </div> </template> <script> export default { data() { return { imageUrl: 'https://example.com/image.jpg' // 初始图片路径 } }, methods: { changeImage() { this.imageUrl = 'https://example.com/new-image.jpg' // 修改图片路径 } } } </script> ``` 在上面的代码中，我们将图片路径绑定到了一个名为`imageUrl`的变量上，然后在需要修改图片路径的时候，只需要修改`imageUrl`的值即可。注意，在绑定属性时，需要使用Vue提供的绑定语法`:src`，而不是直接使用`src`属性。