mpvue 小程序加载不了图片 Error: Failed to load local image resource /images/xx.png the server responded with a status of 404 (HTTP/1.1 404 Not Found)

mpvue开发小程序时候,要添加静态本地图片

<img src="../../images/bg.png" alt="">

会报错:

VM14878:2 Failed to load local image resource /images/bg.png
the server responded with a status of 404 (HTTP/1.1 404 Not Found) 

原因有很多种,解决办法可以改webpack,或mpvue的包,这里提供一个非常直接的办法:

直接写 /static/img/xx.png

比如:
<img src="/static/img/bg.png" >

就可以了

原因也很简单,直接存图片放在根目录下的静态资源static文件,自然找到了

原文地址:https://www.cnblogs.com/liangfengbo/p/9117720.html

时间: 2024-08-13 07:00:40

mpvue 小程序加载不了图片 Error: Failed to load local image resource /images/xx.png the server responded with a status of 404 (HTTP/1.1 404 Not Found)的相关文章

小程序加载图片失败,默认图片的替换方法

需求前端请求后台的接口的时候回,数据会返回图片的url地址,但是有的时候可能是数据字段的错误,或者是返回的链接中信息是404,那么前端这边怎么处理. 大致思路:我们会在data数据中得到一个list一样的图片数据,或者你可以当成接口返回的数据结构,然后我们循环整个数据的时候会在image标签找不到资源的时候error事件,我们就会得到一个失败实例的方法,然后我们在数据循环的时候可以得到list的index值,也就是索引值.把这个值传到error方法中进行list数据的替换就可以了.怎么样简单吧~

微信小程序 加载图片时,先拉长,再恢复正常

今天在写小程序,发现小程序的图片image如过mode设置为widthFix的话, 加载图片会被先拉伸,后恢复正常 我的处理方法是,给他一个初始的height值,或者就直接 height:auto 原文地址:https://www.cnblogs.com/bing0709/p/10729449.html

小程序加载中提示实现

微信小程序弹出loading层的两种方法:直接在代码里控制,在wxml文件里布局弹窗loading层,利用条件渲染,在js代码里控制是否显示loading层. 方法一: <loading hidden="{{loadingHidden}}"> 加载中... </loading> ? this.setData({ loadingHidden: false }) ? 方法二: showLoading:function(){ wx.showToast({ title:

小程序加载数据后滚动条加载到底部

1 wx.createSelectorQuery().select('#body').boundingClientRect(function (rect) { 2 // 使页面滚动到底部 3 wx.pageScrollTo({ 4 scrollTop: rect.bottom 5 }) 6 }).exec() 1.通过wx.createSelectorQuery创建一个 SelectorQuery 对象 2.select 类似 jq 的选择器 3.通过调用 boundingClientRect

小程序加载云端数据库中的第二页数据,前端如何动态显示?

export default class HelloLoading{ constructor(collection_name,db){ this.collection_name = collection_name this.db = db this.setPageCount(db) } pageCount = 0; setPageCount(db){ db.collection(this.collection_name).count({ success:function(res){ // con

刚部署的程序加载不出来css,js以及图片

刚部署的程序加载不出来css,js以及图片,解决方式 需要在配置中加入静态资源 方法一: controller.xml中加入 <mvc:annotation-driven/> <mvc:resources location="/css/" mapping="/css/**"/> <mvc:resources location="/js/" mapping="/js/**"/> <mvc

android客户端加载网络大图片如何避免内存溢出

在Android开发中加载sdcard上的大图片到内存时容易导致OOM异常,常见的解决办法是基于BitmapFactory.Options类提供的方法定义指定的解码方式,设置inJustDecodeBounds属性为true,避免分配内存,返回一个null的Bitmap对象(包含outWidth,outHeightandoutMimeType),然后读取图片的尺寸和类型.再根据屏幕的高和宽对图片进行缩放,最后将缩放的图片加载到内存,主要代码如下: 1 Options opts = new Opt

利用LruCache和DiskLruCache加载网络图片实现图片瀑布流效果(升级版)

MainActivity如下: package cc.patience7; import android.os.Bundle; import android.app.Activity; /** * Demo描述: * 采用瀑布流的形式加载大量网络图片 * 详细分析参见WaterfallScrollView * * 更新说明: * 在原本的的基础上添加了本地缓存DiskLruCache * * 所以在该示例中对于图片的缓存采用了:LruCache + DiskLruCache 的技术 * * 参考

iOS网络编程(三) 异步加载及缓存图片----&gt;SDWebImage

@SDWebImage提供一个UIImageView的类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征. @SDWebImage的导入1.https://github.com/rs/SDWebImage 下载SDWebImage开源包2.将类包拖入工程,再导入MapKit.framework.ImageIO.framework两个框架3.SDWebImage是支持ARC的,在MRC的工程中要注意,可参考MRC工程配置ARC4.注意:SDWebImag