用vue读数据时：页面中图片加载不出来，报错：GET https://pic.qyer.com/Frju2_ 403

img标签中有一个onerror事件。是当引用的src属性获取不到图片，或者网络错误导致无法正常显示src属性的图片时，显示的提示错误图片或者是可以代替的万能图片。vue项目中 img标签加载失败(404)方法，@error事件。@error就是onerror。也可以用于项目中空白页的研发。

乐于助人前言分析思路1. 绝对路径2. 相对路径总结 本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题，心里路程比较多，所以话比较多哈哈，感谢阅读，大概耗时2分钟 前言 如上图所示，我的图片就是储存在了 assets/images/ 目录下 ，但是结果不显示，这个问题其实早就遇到了，当时查阅资料之后就解决了，大概原理也不是很深，解决的方式也并不复杂，所以就没有记录，但是今天写了一个小案例时，这个问题冒出来给我整郁闷了，我怀疑是不是自己记错了解决的方式了，我去查资料，并没有什么问题，最

关于vue网页的开发过程遇到本地图片加载失败的解决方法

变量的值，该变量的值就是一个字符串，所以最后显示的是字符串没有解析地址去获取图片。是一个 ESM 的原生功能，会暴露当前模块的 URL。require是在运行时加载，import是编译时加载。中会将图片来当做模块来用，因为是动态加载的，所以。为了能让Webpack返回正确的资源路径，使用。根据结果来看，相对地址没有被解析。这里的错误原因理解的是动态绑定。进行解析，然后返回处理过的。进行解析，然后返回处理过的。解析到的路径都会被解析为。提供的一种加载能力，但是。提供的静态资源载入方法，

解决方法：图片不再那就给它一个默认的图片加载进去。通常用于引入静态资源，如图片、样式文件等。解决vue加载图片不显示问题。

在 Vue 中使用静态图片时，图片加载失败的原因是在项目编译后 img 标签根据 src 的路径寻找不到指定的资源，举个例子，在 src/assets 文件夹下放一张图片 “Yunjin.png”，在打包后图片名变成了 “Yunjin-xxxxx.png”，而 img 标签中的 src 路径还是原来的名字。在 webpack 环境下可以使用 require() 方法，但是到了 vite 环境下 require() 方法就用不了了，不过还是有其它方法可以用的——import.meta.url。

使用require()内部只能传输静态字符串。这样是对的，如果传输一个变量则是错的。

Vue项目打包后动态背景图片加载失败的问题，主要由于webpack默认将10K以下图片转为base64格式，而大图片路径处理不当导致。解决方法：1）在vue.config.js中调整limit值控制图片转base64的阈值；2）修改publicPath配置资源加载路径。需注意base64虽能减少HTTP请求，但过大图片转base64会导致JS文件臃肿，影响加载性能和用户体验。合理设置转换阈值是关键，小图片适合转base64，大图片应保持原格式通过正确路径加载。

一、常规解决方法 我们都知道，img标签支持onerror事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。 <img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';"> 当图片不存在时，将触发 onerror，而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，

img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。动态地址，路径被加载器解析为字符串，所以图片找不到。设置绝对路径或者相对路径是改为用。引入才能成功，就可以动态使用了。

2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。3.图片放在assets文件夹，然后在data里面require进图片。1.把图片放在src同级的static文件夹下。

vue项目中引用data中图片路径无法显示

BASE_API: process.env.VUE_APP_BASE_API, // 接口API地址。subjectParentId:'',//一级分类id。subjectId: '',//二级分类id。teacherList:[],//封装所有的讲师。subjectOneList:[],//一级分类。subjectTwoList:[]//二级分类。// 图片路径，static放在src路径下。-- 课程封面-->

vue项目png图片加载不出来的问题

<template> <div v-cloak v-show="show"> <div v-show="mailbox"> <div class="deanMailbox" > <div class="deanMailDiv"> <div> ...

解决 vue 图片显示问题 403报错

图片放在src同级的static文件夹下。

vue中img标签src使用https网络地址，图片无法显示问题

来设置图片的路径。这样可以确保路径正确地被解析成资源路径。然后在路径用require括起来。因为在Vue模板中直接使用字符串赋值的方式不会被解析为正确的资源路径。直接通过字符串赋值命名路径是不会生效的，如。你可以使用动态绑定（