彻底搞懂并解决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 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 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
谈谈PHP语法(4)
2006/10/09 PHP
聊天室php&amp;mysql(五)
2006/10/09 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
Python 流程控制实例代码
2009/09/25 Python
python九九乘法表的实例
2017/09/26 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
python 实现倒排索引的方法
2018/12/25 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
String这个类型的class为何定义成final?
2012/11/13 面试题
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
中华魂演讲稿
2014/05/13 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
财务个人年度总结范文
2015/02/26 职场文书
《火烧云》教学反思
2016/02/23 职场文书
68句权威创业名言
2019/08/26 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android