彻底搞懂并解决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 相关文章推荐
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
详解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
做一个有下拉功能的留言版
2006/10/09 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
JavaScript中Function详解
2015/02/27 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
Three.js学习之网格
2016/08/10 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
深入理解Python3中的http.client模块
2017/03/29 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Django 拆分model和view的实现方法
2019/08/16 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Linux的文件类型
2012/03/07 面试题
信息技术专业个人自我评价
2013/12/11 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
文明班级建设方案
2014/05/15 职场文书
mysql脏页是什么
2021/07/26 MySQL
JS 基本概念详细介绍
2021/10/16 Javascript
Python基本知识点总结
2022/04/07 Python