使用vue动态引入图片显示失败，查看控制台，发现图片返回类型为text/html,这里我的图片是从后台服务器上获取的，如果你没有使用Vue的devServer.proxy 进行代理，可以光速移步百度

问题解决



这里是scope是我从后端获取的图片的地址，由于我使用了vue的代理：

这里请求的图片的地址还是本机端口上，没有转发到后端服务器端口8080上，没有访问到图片，所以返回值是text/html，开发环境的话，加上/api就好了

总结

如果真的需要代理的话，还是得听官方爸爸的话，使用第三方代理吧，不然还是会出很多意想不到的问题

Vue src动态引入图片不显示问题的更多相关文章

  1. vue中动态引入图片为什么要是require， 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  2. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  3. vue.js中引入图片

    vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入.而在template中或者js动态引入时,会显示不出图片. 解决一 图片通过后端返回引入网络图片路径即可. <div ...

  4. 🍓 vue循环渲染本地图片不显示？ 🍓

    teamList: [{ title: '大数据拍牌', imgUrl: './img/data.jpg', introduce: '5星服务:强烈推荐', cost: '15000', bail: ...

  5. react引入图片不显示问题

    在react 中引入图片的方式和正常不同,,很容易引入不显示 引入本地图片 1.(采用组件式引入方法) import Logo from "图片路径" <img src={L ...

  6. vue-cli3项目中解决动态引入图片img404的问题

    博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon. 本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~ ...

  7. vue 相对路径的图片 不显示问题

    例如 data () { return { img: '../../images/jifen/index/img_list_default_pic.jpg' //路径也没问题啊,怎么不显示呢,难道他瞎 ...

  8. Vue.js 动态为img的src赋值

    在vue中动态给src赋值绑定图片会显示不出来 动态添加src被当做静态资源处理了,没有进行编译 解决方法: 1.用网络地址 把图片放在cdn或自己的服务器上,把网络地址存在imgUrl里,然后直接& ...

  9. viewer与 iview Carousel（走马灯） 结合使用，图片无法显示

    问题原因:iview Carousel (走马灯)在加载是如果没有图片 它没有高度.之后给src赋值,图片无法显示,拖动一下浏览器宽或搞它就会显示. 走马灯解决这个问题方法:1在Carousel或其父 ...

随机推荐

  1. git配置修改,git自定义命令,合并命令

    一.自定义合并命令 将add commit push合并 git config --global alias.cmp '!f() { git add -A && git commit ...

  2. Laravel-手机短信验证码-阿里云

    1.composer require alibabacloud/client2.App\Service\AliyunSms.php <?php namespace App\Service; us ...

  3. html2canvas滚动截图

    滚动截图 项目需求要进行动态的滚动截图搜索一下发现html2canvas可以实现截图,但是滚动截图网上搜罗了一遍发现不是很完善所以记录下 首先npm一下安装依赖: npm install html2c ...

  4. ASP.NET Core 6框架揭秘实例演示[24]：中间件的多种定义方式

    ASP.NET Core的请求处理管道由一个服务器和一组中间件组成,位于 "龙头" 的服务器负责请求的监听.接收.分发和最终的响应,针对请求的处理由后续的中间件来完成.中间件最终体 ...

  5. 2022年官网下安装DBever最全版与官网查阅方法

    目录 安装部署DBeaver 一.官网下载安装 1.百度搜索DBeaver. 2.进入主页,点击DownLoad下载. 3.查看列表,选择windows的exe版本下载. 4.找到位置,双击打开,弹出 ...

  6. libx264开发笔记（一）：libx264介绍、海思平台移植编译

    前言   在编译ffmpeg时,使用到h264编码时是需要依赖libx264的,本文章是将将libx264作为静态库移植到海思上.   相关博客 <Qt开发笔记之编码x264码流并封装mp4(一 ...

  7. 线程池的极简用法——内置线程池multiprocessing

    大家好,今天博主来分享一个线程池的小捷径--内置线程池的使用方法 一.背景 说道多线程,对变成层有了解的小伙伴一定不陌生,虽然不知道是什么但是也会从各大网站.面试分享等途径听说过.这里就不做过多的介绍 ...

  8. Linux系统常用指令

    建立一个文件或文件夹的软链接: ln -s 原名 软链接名 软链接就类似Windows下的"快捷方式",访问它其实访问的是它指向的内容. git仓库操作 1.通常远程操作的第一步, ...

  9. [SPDK/NVMe存储技术分析]013 - libibverbs API应用案例分析

    本文是对论文Dissecting a Small InfiniBand Application Using the Verbs API所做的中英文对照翻译 Dissecting a Small Inf ...

  10. 从零开始，开发一个 Web Office 套件（12）：删除文字 & 回车换行

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...