场景

  图片路径被原样输出,无法正确加载图片;

<img :src="imgSrc"/>

原因

  webpack 会将:src 动态绑定的值解析成字符串,原样输出;

解决办法

  将路径使用 require('') 包裹起来;

data(){
   return {
    imgSrc:require('../../imgages/1.png')
  }
}

Vue <img :src=""/> 图片不显示的更多相关文章

  1. vue页面中图片不显示解决

    在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来 现象: network页面资源也不报错,而且状态码竟然还是200,点prev ...

  2. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  3. Vue src动态引入图片不显示问题

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

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

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

  5. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  6. vue 动态拼接地址,使用本地的图片不显示

    <el-col :span="4" v-for="(item, index) in listData" :key="index"> ...

  7. Vue动态加载图片图片不显示

    图片是放在assets文件夹下的 使用require进行解决 图片不显示的原因 在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法 ...

  8. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  9. VUE Base64编码图片展示与转换图片

    图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,使用 base64 传输图片文件可以节省一个 http 请求,图片的 base64 编码可以算是前端优化的一 ...

  10. Vue实现一个图片懒加载插件(转载)

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

随机推荐

  1. php7安装redis6扩展

    1.下载 php-redis扩展下载地址: http://pecl.php.net/package/redis 具体下载版本以自己的PHP版本信息为准 linux下载命令 wget http://pe ...

  2. 手把手教你下载b站视频并生成音频字幕

    1.下载b站视频: 可以直接使用https://bilibili.iiilab.com/ 贴进去网址就能下载了 2.提取音频 可以使用 ffmpeg 将音频文件提取出来(ffmpeg直接去官网下载即可 ...

  3. 团队小规模本地大模型服务平台搭建 - Windows

    实现目标和考虑因素 部署一个支持多用户同时使用.多模型运行的离线局域网大模型服务器 需要考虑以下几个关键因素: 大模型的加载和管理.使用一个基础大模型,根据需要创建多个专用模型,模型管理方便可靠. 并 ...

  4. Delphi 中拖动无边框窗口的5种方法

    1.MouseMove事件中加入: // ReleaseCapture; // Perform(WM_SYSCOMMAND, $F017 , 0); 2.MouseDown事件中加入: // POST ...

  5. NextJS CVE-2025-29927 安全漏洞

    NextJS CVE-2025-29927 安全漏洞 CVE-2025-29927 是一个存在于 Next.js 框架中的关键安全漏洞.该漏洞允许攻击者通过伪造或篡改 x-middleware-sub ...

  6. 【Git】在 Idea 中使用 Git

    在 Idea 中使用 Git 1 安装 Git 核心程序 根据自己的电脑操作系统从 Git 官网 https://git-scm.com/ 下载对应的 Git 核心程序. 以 git-2.21.0 为 ...

  7. leetcode每日一题:使所有字符相等的最小成本

    题目 2712. 使所有字符相等的最小成本 给你一个下标从 0 开始.长度为 n 的二进制字符串 s ,你可以对其执行两种操作: 选中一个下标 i 并且反转从下标 0 到下标 i(包括下标 0 和下标 ...

  8. RAG, GraphRAG, LightRAG, and KAG

    KAG: A Better Alternative to RAG for Domain-Specific Knowledge Applications https://medium.com/@ahme ...

  9. IDEA强制注册登录版本号:IntelliJ IDEA 2021.2.2

    建议采用 IntelliJ IDEA 2021.2.2 版本进行  Evaluate for free  试用 IntelliJ IDEA 2021.3.3  以前的版本可以不用注册登录idea账户, ...

  10. 神级辅助工具,解决GPT-SoVITS配音发音纠正和逐句优化

    即使地表最强AI配音也无法自动识别360应配音成三百六十还是三六零,在长文配音中很难一次满意,总会因为个别几句配音不理想而毁掉整个配音成果. 在GPT-SoVITS配音中,自动把长文章拆分成段落或长句 ...