vue 使用＜img src＞加载图片的解决办法

已于 2022-01-23 16:55:28 修改
阅读量3.7k 收藏 4
点赞数 1
分类专栏： vue小知识 文章标签： vue.js 前端
于 2022-01-23 16:53:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_33438652/article/details/122652427
版权
本文记录了在Vue项目中遇到的图片加载问题，包括assets和static目录的区别，以及解决Vue返回[object Module]给img src的两种方法：通过default属性访问或使用import语句。同时提及在ejs模板语言中引入图片的注意事项。
摘要由CSDN通过智能技术生成

最近使用<img src = “”>加载图片时候,遇到很多问题,现记录一下

一.assets和static的路径区别

assets:在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),
　
static：在这个目录下,文件不会被webpack处理,他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，任何放在static/中文件需要以绝对路径的形式引用：/static[filename]

所以基于这个区别,引用的路径如下:

  1. assets
 <img src="@/assets/img/user-getm.png" alt="">
 <img :src="require('@/assets/img/user-getm.png')" alt="">
  1. static
 <img src="/static/img/favicon.ico"
最低0.47元/天 解锁文章
Vue 中img图片加载失败解决方案
长路漫漫，唯键作伴
03-26 2313
在Vue有时候你引用本地图片在本地环境可以正常显示,但是到了服务器上就出现资源请求失败以及无法显示的情况。 这是因为当你在元素里面绑定:src时,Vue将绑定属性的路径作为字符串输出了。 export default { data () { return { img: '../../XXX/XXX/xx.png' } } } ////////// <img :src="img"> // 这种方式会先找到路径解
基于vue 动态加载图片src的解决方法
08-28
基于vue 动态加载图片src的解决方法 一、 Vue 中的动态加载图片src问题 在 Vue 项目中，动态加载图片src是一个常见的问题。当我们使用 Vue 编写项目时，经常会遇到图片加载不出来的问题，特别是在使用 webpack ...
vue中img src 动态加载本地json的图片路径写法
10-17
主要介绍了vue中的img src 动态加载本地json的图片路径写法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue的img标签scr加载图片地址变量加载不出来
最新发布
qq_74237833的博客
12-12 170
vue中img标签的src属性直接用相对地址加载无误：但改为变量后加载不出来：
vue src动态加载请求获取的图片
qq_25600055的专栏
03-16 2224
一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' }, ...
【Vue】】img使用 :src 动态绑定图片地址，但是加载图片不成功
y_coder的博客
07-31 5532
img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。动态地址，路径被加载器解析为字符串，所以图片找不到。设置绝对路径或者相对路径是改为用。引入才能成功，就可以动态使用了。
Vue之assets图片加载不出来
weixin_52418790的博客
09-24 5350
说明 assets和static连个文件都是存放静态资源的目录 在html下使用它们是无差别的，但是在js中使用的话，assets中资源的路径要经过webpack中file-loader编译，不能直接写。 而static中的文件，不会经过编译，项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。 二者中的图片资源，html页面可以直接使用；但在动态循环绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以。 解决 一、
vue src动态加载请求获取图片的方法
10-17
在Vue组件的模板中，使用`<img>`标签的`src`属性绑定到`formData.avatar`，确保图片可以被正确渲染： ```html <div class="avatar"> <img :src="formData.avatar" alt=""> </div> ``` 二、加载请求获取到的...
Vue 中的 img 标签静态图片加载失败
m0_61069739的博客
10-17 1832
在 Vue 中使用静态图片时，图片加载失败的原因是在项目编译后 img 标签根据 src 的路径寻找不到指定的资源，举个例子，在 src/assets 文件夹下放一张图片 “Yunjin.png”，在打包后图片名变成了 “Yunjin-xxxxx.png”，而 img 标签中的 src 路径还是原来的名字。在 webpack 环境下可以使用 require() 方法，但是到了 vite 环境下 require() 方法就用不了了，不过还是有其它方法可以用的——import.meta.url。
vue中当图片加载失败时触发事件，重新修改src地址或者删除此标签
a1783118的博客
04-25 485
vue中当图片加载失败时触发事件，重新修改src地址或者删除此标签
bug解决-Vue中img图片加载失败解决方案
hangao233的博客
05-08 1575
Vue 中img图片加载失败解决方案 bug：assets文件下的图片动态取得话，显示不出来。 解决方法：把图片放到public文件夹下 public是直接原封不动打包到dist里面
Vue图片加载失败处理方法
weixin_43194434的博客
10-16 3650
Vue项目中 img 加载失败 场景:有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片 // page 代码 <img :src="imgUrl" @error="handleError" alt=""> <script> export default{ data(){ return{ imgUrl:'' } }, ...
当图片加载失败时，做处理(onerror)(vue)
weixin_61285710的博客
12-17 1723
当图片加载失败时、或者加载中，做处理(onerror)(onload)(vue)，
vue，请求获取图片code，img中产生两次src获取资源问题
github_39598787的博客
07-25 4215
示例代码： &lt;template&gt; &lt;!-- 1、 --&gt; &lt;img :src="imgUrl + MainImg + '_0x0'" alt="款式主图" v-if="MainImg != ''"&gt; &lt;!-- 2、&lt;table class="table-content" v-if="lis
vue中动态修改img标签中src的方法
黄钢的博客
07-04 8249
首先看vue中img标签的常规写法当src需要动态修改时，有点麻烦，经常忘记，记录一下。
img,src 出现两次
zyslovely的博客
01-10 309
this.__eimg.src = _data.tinyUrl || ''; 代码中出现两次this.__eimg.src = _data.tinyUrl || ''; 导致请求了两次这个img。 第一次被aborted了，第二次成功 :x
vue中的img路径
热门推荐
03-30 1万+
目录 一、引入public中的img 二、引入assets中的img 三、通过require()函数动态引入路径 四、css中background属性通过url()函数引入路径 五、css中background属性通过url()函数 动态 引入路径 六、通过组件动态引入路径 七、组件引入public中的路径 八、组件引入外部图片链接 推荐<el-image>组件，其详细介绍见：https://element.eleme.cn/#/zh-CN/component/image 一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> <template> <div> <span @click="showImage = !showImage">点击我</span> <img v-if="showImage" src="07111648929554.jpg" /> </div> </template> </div> </body> </html> <script> var vm = new Vue({ el:'#app' }) export default { data() { return { showImage: false } } } </script>找到不能显示的问题
06-03
<img v-if="showImage" src="07111648929554.jpg" /> </div> </template> </div> <script> var vm = new Vue({ el: '#app', components: { 'my-component': { data() { return { showImage: false } }...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值