彻底搞懂并解决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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 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调用Oracle存储过程
2006/10/09 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
初学Javascript的一些总结
2008/11/03 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
Python文件和目录操作详解
2015/02/08 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
20招让你的Python飞起来!
2016/09/27 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
职专应届生求职信
2013/11/16 职场文书
员工安全承诺书
2014/05/22 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
群众路线调研报告范文
2014/11/03 职场文书
雨花台导游词
2015/02/06 职场文书
2015年环保局工作总结
2015/05/22 职场文书
时尚女魔头观后感
2015/06/04 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python