VUE中的img src问题

最新推荐文章于 2024-05-16 12:18:46 发布
最新推荐文章于 2024-05-16 12:18:46 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： 踩过的坑 文章标签： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41883423/article/details/111871601
版权

VUE中的img src问题

问题表现

  1. 当图片文件在/static路径下时，可以正常填入路径即可。
  2. 当图片文件在/assets路径下是，正常填入字符串路径，将会报错无法找到该图片

问题分析
/assets下的图片被webpack打包，最终路径并不在/assets下。

解决
用import或是require先将图片引入

例:

<img :src="require('@/assets/images/ceshi.png')">
帅比九日
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vuecli3中img src 的引入问题
10-15
主要介绍了解决vuecli3中img src 的引入问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中img src 动态加载本地json的图片路径写法
10-17
本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。 首先，重要的一点是，无论是本地JSON文件还是其中的图片URL，它们都应该放在`static`文件夹内。这是因为Vue CLI或...
vue中动态修改img标签中src的方法
黄钢的博客
07-04 7463
首先看vue中img标签的常规写法当src需要动态修改时，有点麻烦，经常忘记，记录一下。
vue项目- img的src动态赋值
nunumaymax的博客
07-15 3862
在做vue项目的时候，遇到了对img的src动态赋值，检查过图片路径没有错误，但是却加载不出来的问题。在网上查了下发现，原因是。，需要在路径前面添加。
VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值(1)
最新发布
2401_84437095的博客
05-16 562
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
FellAsleep的博客
05-31 7692
因为vite构建的vue3项目，无法使用require导入图片，需要处理。1.新建 utils/require.js 文件。
vue中图片获取失败原由
m0_73648753的博客
01-01 659
src是CSS伪类，用于选取拥有src属性且链接指向某些资源的元素。3、模块化引入: 将图片资源作为模块引入，便于操作和管理图片资源。1、优化文件大小: 可以根据配置对图片进行优化压缩。vue使用的是webpack来进行打包的，图片地址要经过处理。webpack 支持使用 require。src是HTML元素的属性,直接指定资源链接。来加载模块，src使用require。能正确的将图片进行导入和处理。
vue引入图片报错？VueCli 关于静态资源(图片) 引入问题
韩旭的博客
02-24 1万+
文章目录一、关于Vue-Cli图片引入问题？二、两种引入方式三、相对路径动态时如何使用？四、背景图片background-image如何渲染？ 一、关于Vue-Cli图片引入问题？ 首先我们要清楚Vue-cli是基于Webpack来进行的打包，其次我们再来看一下Vue-cli的官网是如何给出我们的打包引入图片方式的。 二、两种引入方式 简单的来说 一种是相对引入方式，一种是绝对引入方式 相对引入： <img src="../assets/logo.png" alt="" />
vue动态设置img的src路径实例
10-18
今天小编就为大家分享一篇vue动态设置img的src路径实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue.js 动态为img的src赋值方法
10-18
下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2中img标签的src是动态渲染的，路径是对的，就是显示不出来
weixin_47617631的博客
06-14 923
解法来源于这位大佬：https://www.cnblogs.com/corgisyj/p/12025012.html。加上require() 即可。
Vue中的img标签对src属性使用动态绑定问题——两种方法
weixin_42782272的博客
04-13 1万+
方法一： 正常来说，一些图片的资源我们会放在src文件夹的asset文件夹中。 这样的话将src属性写死是没有问题的。 但是如果想使用动态绑定就需要在根目录的public文件夹下新建一个static文件夹用来存储静态文件。 这样就可以直接访问到了。 <img :src="'/static/' + item.label.split(' ')[0].toLowerCase() + '.png'" :alt="item.label" style="width: 100%; height: 100
vue中图片文件夹的保存与访问
宁波阿成的博客
08-15 3374
​ 在使用vue框架进行开发的过程中，有两个文件夹都可以存放我们的图片以及样式等，一个是public文件夹，一个是src下的assets文件夹。
Vue动态设置img的src不生效的问题
qq_46258819的博客
09-22 6321
在VUE项目中有时会遇到需要动态修改Img的src的情况，如果直接修改会使得图片无法显示出来。这是由于src被当做静态资源处理了，并没有进行编译。
vue中如何动态配置img标签的src
W78955的博客
04-18 1869
vue中如何动态配置img标签的src
Vue中img的src属性绑定与static文件夹
悦涵仙子的技术笔记本
12-14 2万+
不少人在vue的开发中遇到这样一个问题： img的src属性绑定url变量，然而图片加载失败。 大部分的情况中，是开发者使用了错误的写法，例如：这样写肯定是不对的，正确的写法应该使用v-bind:不过，有时候即使使用了正确的语法，依旧无法显示图片，因为你的imgUrl使用了本地图片的路径。 例如
前端学习之路：解决vue引入assets下图片路径找不到问题
热门推荐
标题有点难
04-03 3万+
<img :src="imgsrc2"> export default{ data(){ imgsrc2: require('../assets/logo4.png') } }
vue：img标签中src动态字符串无效
Space_CN的博客
11-08 1479
1.问题： 在使用img标签读取图片时，如果使用绝对路径字符串则可以成功读取图片，但是如果使用动态拼接的变量字符串则不能获取到想要读取到的图片 <el-image :src="url"></el-image> this.url = require('C:\\Users\\Spacer\\Desktop\\images\\1.jpg') this.url = 'C:\\Users\\Spacer\\Desktop\\images\\' + img 浏览器console报错：
vue3 img 中变量引入src
06-13
在Vue 3中，可以使用插值表达式(`{{ }}`)和`v-bind`指令来动态绑定`<img>`标签的`src`属性。 如果你想要绑定一个变量作为`<img>`标签的`src`属性，可以使用插值表达式和模板字符串来实现。例如： ``` <img :...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值