彻底搞懂并解决vue-cli4中图片显示的问题实现


Posted in Javascript onAugust 31, 2020

在基于 vue-cli 实际开发过程中,很多小伙伴都会遇到关于图片显示的困扰,不管怎么设置,图片就是显示不出来,今天我们来详细说说这个问题。

图片无法显示,绝大部门的情况是图片路径问题,要搞懂路径问题,分别有相对路径与绝对路径

实际开发中使用图片最多的场景有以下三种:

1、手动引入

<template>
    <img :src="imgurl" />
  </template>
  <script>
    import logo from '../img/logo.png'
    // 或
    const logo = require('../img/logo.png');
    export default{
      data(){
        return {
          imgurl:logo
        }
      }
    }
  </script>

使用require或import方式引入图片时,引入路径是相对于当前文件路径的,编译时webpack会介入并把路径处理成服务器绝路径

2、相对路径

<img src="../img/logo.png" />

vue-cli 中使用相对路径时,webpack会自动介入,上面的代码在编译时自动变成

<img src="require('../img/logo.png')"

最终在页面的显示效果与以上手动引入方式一致

3、绝对路径

<img src="/img/logo.png" />

使用绝对路径,首先要了解服务器根目录在哪,大家都知道,在 vue-cli 的项目本身自带一个服务器的,基于 webpack-dev-server 模块,根目录为 public 文件夹,所以,使用 绝对路径 的方式展示图片,必须把图片放到 public 文件夹,这也是最简单的一种方式,这种方式webpack不会介入,所以最终显示效果与引入时的代码一致,代码如下:

彻底搞懂并解决vue-cli4中图片显示的问题实现

彻底搞懂并解决vue-cli4中图片显示的问题实现

最终显示效果

彻底搞懂并解决vue-cli4中图片显示的问题实现

4、数据中的图片

<template>
    <ul>
      <li><img :src="item.imgurl" v-for="item in goodslist" /></li>
    </ul>
  </template>
  <script>
    export default{
      data(){
        return {
          goodslist:[{name:'goods1',imgurl:'../img/goods1.png'},{name:'goods2',imgurl:'../img/goods2.png'},{name:'goods3',imgurl:'../img/goods3.png'},
          ]
        }
      }
    }
  </script>

这种情况应该是最常见的(ajax请求数据回来,然后遍历写入到页面结构中),这个时候绑定到 src 属性的是一个变量,无法直接手动 importrequire ,如果直接使用 imgurl 属性中的路径, webpack不会介入处理 ,所以以上代码是无法正常显示图片的,解决方法如下:

方法1:遍历数据,使用前先手动 require

在前端,模块的引入默认是不支持动态引入的(即不支持:require(变量)),如下

this.goodslist = this.goodslist.map(item=>{
    // 虽然路径是正确的,但以下方式引入会报`Cannot find module '../assets/logo.png'`
    // item.imgurl = require(item.imgurl);

    // 正确的方式为
    item.imgurl = require('../img'+item.imgurl.replace('../img',''))
    return item;
  })

有小伙伴可能会觉得奇怪,为什么这样做就可以了,Webpack 在处理动态名称模块名的时候,会直接将能识别的静态路径和路径下的所有子文件都作为模块处理,如: require('../img'+imgName) ,能识别到 ../img 目录,并将该目录下所有文件当做模块处理,做成一个Map映射以便后面进行匹配,所以能识别到对应的文件,其原理是 require.context ,属性如下:

require.context(directory,useSubdirectories,regExp)

  • directory {String} -读取文件的路径(一般为一个目录)
  • useSubdirectories {Boolean} -是否遍历文件的子目录,默认false
  • regExp {RegExp} -匹配文件的正则,默认匹配所有文件

方法返回一个函数(假设为fn),传入图片路径(不包含directory的路径)可得到处理过的图片对应路径(如:fn('./goods1.png'),) ,上面的代码等效于

this.goodslist = this.goodslist.map(item=>{
    const fn = require.context('../img',false,/^\./);
    const file = item.replace('../img','.')
    item.imgurl = fn(file);
    return item;
  })

方法2:在数据库端直接使用绝对路径,并把所需图片放到 public 目录中

imgurl的格式为: '/img/goods1.png'

到此这篇关于彻底搞懂并解决vue-cli4中图片显示的问题实现的文章就介绍到这了,更多相关vue-cli4 图片显示 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
详解Node.JS模块 process
Aug 31 #Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 #Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 #Javascript
JS性能优化实现方法及优点进行
Aug 30 #Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 #Javascript
JavaScript中CreateTextFile函数
Aug 30 #Javascript
详解vue组件之间的通信
Aug 30 #Javascript
You might like
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
PHP 中的批处理的实现
2007/06/14 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
Use Word to Search for Files
2007/06/15 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
详解如何运行vue项目
2019/04/15 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
vscode调试django项目的方法
2020/08/06 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
机械专业应届生求职信
2013/12/12 职场文书
销售心得体会
2014/01/02 职场文书
为自己工作观后感
2015/06/11 职场文书
公司出差管理制度范本
2015/08/05 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server