1. favicon.ico 504问题

注意，由于更改的是配置文件，所以需要重新npm run dev运行该项目。

2. 图片引用加载不出来

vue中常见的两种图片引用方式如下：

直接img标签的src属性传入绝对路径或者相对路径；
使用img标签（其他组件，如el-avatar）的src属性绑定变量值，需要注意的是，变量值必须是通过require引进本地图片或者网络上的图片。

<template><el-container><el-aside class="header_left"><img src="../../assets/logo2.png" /></el-aside><el-main class="header_right"><el-avatar :src="avatarUrl" class="user_acvator"></el-avatar></el-main></el-container>
</template><style>.header_left {width: 200px;display: flex;justify-content: left;align-items: center;}.header_right {width: 100%;padding: 0px;display: flex;justify-content: center;}section{height: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0;}.user_acvator {/* 实现右对齐 */margin-left: auto;}</style><script>
export default {data() {return {avatarUrl: 'http://192.168.137.118:8080/group1/M00/00/00/wKiJdl8uz3iALls-AAA-Nvu01EY380.png' // require('../../assets/avatar.png')}}
}
</script>

在引入本地图片，若变量值没有通过require引进，则会报错如下：

Vue中图片加载问题总结相关推荐

vue的v-for循环中图片加载路径问题
vue的v-for循环中图片加载路径问题产品要求要求图片和它的名字一一对应, vue中的img的src可以动态绑定到一个变量上 <template> <div><ul ...
html5 循环加载图片,解决vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
在Vue中异步加载数据渲染到Dom
在Vue中异步加载数据渲染到Dom 问题 <div v-for="o in resmessage" :key="o" class="text i ...
SpringBoot项目中图片加载失败
SpringBoot项目中图片加载失败这个原因有很多,比如你的拦截器,过滤了静态资源. 如果你感觉自己的前端代码没有问题,配置也没有问题,可能是由于你后期导入的图片还没有被加载到target文件夹中 ...
Vue 在图片加载过程中遇到的问题
今天在编写 Vue 项目时,遇到了一个图片加载问题,觉得还是蛮重要的,所以记录一下我之前一直以为 Vue 生命周期中的 mounted 是等所有资源加载完毕之后,再来执行,但是今天我在 mouten ...
vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢? 方法一:onerror <img src="原来要加载的资源" o ...
微信公众号文章中图片加载时，占位图宽高大小的确定
打开一篇多图的微信公众好文章.在图片加载过程中,我们发现微信对每一个img都塞了也个占位图,而且占位图的宽高就是实际加载完图的宽高.这是如何做到的呢? 1.微信所有的img标签里,都有自定义的data ...
html 图片显示一块一块加载失败,页面中图片加载失败的优化方法
网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的.情况如下: 不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大 ...
VUE打包图片加载失败问题
昨天的搬运工,今天的小雷锋. 问题描述,使用VUE-CLI打包后,出现图片无法显示情况.这里可能存在两种情况: 静态资源CSS中使用图片作为背景图片使用时. 在JS中生成图片标签后,再设置图片路径时. ...

Vue中图片加载问题总结

1. favicon.ico 504问题

2. 图片引用加载不出来

Vue中图片加载问题总结相关推荐

最新文章

热门文章