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

在基于 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不会介入，所以最终显示效果与引入时的代码一致，代码如下：

最终显示效果

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 属性的是一个变量，无法直接手动 import 或 require ，如果直接使用 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 图片显示 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用Vue-cli 中为单独页面设置背景图片铺满全屏

    啥也不说了,大家还是直接看代码吧~ <template> <div id="logo"> </div> </template> <script> import meadiaurl from '../../api/mediaurl' export default { name: "logo" </script> <style scoped> #logo{ background: url

  • vue-cli脚手架引入图片的几种方法总结

    我个人常用的方法,一直在摸索更好的方法,如果各位大佬有什么建议,可以给我评论留言哦 1.import方法 第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第二步:在data对象中定义一个属性edits,值对应edit 第三步:在template中 给标签绑定属性 最后刷新界面看效果就可以了! 2.static方法 第一步:图片放在static文件夹,在data对象的一个里定义属性pro_img,属性值是图片与.vue的相对路径 第二步

  • 详解在vue-cli3.0中自定css、js和图片的打包路径

    前言 我们有时候因为一些特殊需求,可能需要将js/css/img等资源文件都打包到根路径下,但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹,并不能针对css/js/img等资源文件分别来做设置,那么请看我如何尝试的吧! 分析 众所周知,vue-cli3.0使用了webpack进行打包处理,那么我们是否可以拿到目前打包默认的一些webpack配置,并在这些配置中找到一些蛛丝马迹,从而更改配置来实现对打包路径的更改呢? 好在vue-cli3.0提供

  • vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能

    前端工作中,经常需要图片裁剪的场景,cropper.js是一款优秀的前端插件,api十分丰富. 本文是在vue-cli项目下封装图片裁剪插件,效果图如下: 话不多说,看步骤吧. 第一步:准备开发环境 cropper.js是基于jquery的,所以要先安装jquery 执行命令: npm  install --save-dev jquery cropper 为webpack配置添加jquery的映射 修改webpack.base.conf.js配置,添加标红的一行 第二步:新建图片裁剪组件 ind

  • 前端vue-cli项目中使用img图片和background背景图的几种方法

    前端中背景图片极其常用,但是很容易出现各种问题. 一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹. 一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. css方法 正常使用background属性即可. 如有问题,应把图片资源放入static静态资源文件夹,不是assets之类的其他文件夹. <div class="bgImg"></div> <style> .bgImg{ background-image:url("

  • vue-cli中打包图片路径错误的解决方法

    vue-cli中打包图片路径错误的解决方法

    最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如

  • vue cli使用绝对路径引用图片问题的解决

    前言 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档 很全面的. Vue是近两年来比较火的一个前端框架(渐进式框架吧),本文将给大家详细介绍vue cli使用绝对路径引用图片问题的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看吧. 正文: 在页面中使用绝对路径可通过在js中用 require() 引入 data (){ return { sr

  • 浅谈在vue-cli3项目中解决动态引入图片img404的问题

    博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon. 本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~),给出效果图: 就是那个红框选中的那个天气状况图标icon要根据当前城市获取当前城市天气状态码,再根据当前城市状态码找到这个对应的天气图标icon~~ 按照一般的开发模式,静态图片路径是相对路径还是绝对路径都可以,因为图片路径是静态的是死的,所以webpack去找这个图片路径的时候是能找到的. 但

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

    在基于 vue-cli 实际开发过程中,很多小伙伴都会遇到关于图片显示的困扰,不管怎么设置,图片就是显示不出来,今天我们来详细说说这个问题. 图片无法显示,绝大部门的情况是图片路径问题,要搞懂路径问题,分别有相对路径与绝对路径 实际开发中使用图片最多的场景有以下三种: 1.手动引入 <template> <img :src="imgurl" /> </template> <script> import logo from '../img/

  • 解决vue cli4升级sass-loader(v8)后报错问题

    sass-loader报错: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schem a.  - options has an unknown propert

  • 解决vue组件中使用v-for出现告警问题及v for指令介绍

    解决vue组件中使用v-for出现告警问题及v for指令介绍

    在项目中运行v-for代码段时, <flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> <flexbox-item v-for="role in roles " > <x-button mini :type="role.type" style="padding: 0 14px" @clic

  • 解决Vue开发中对话框被遮罩层挡住的问题

    在Vue的开发中,一旦我们用到对话框,经常出现的问题是对话框被遮罩层挡住,无论是Element-UI dialog还是bootstrap的Modal,如下图所示: 造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值,比较简单易行的办法如下:对于bootstrap Modal需要添加css语句 .modal-backdrop {  z-index: -1;} 而对于Element UI该组件已经在属性层面提供了解决办法,只要添加:modal-append-t

  • 解决vue数组中对象属性变化页面不渲染问题

    做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 你打开控制台,然后用前面例子的 items 数

  • 解决vue组件中click事件失效的问题

    最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • 解决vue elementUI中table里数字、字母、中文混合排序问题

    1.使用场景 使用elementUI中的table时,给包含数字字母中文的名称等字段排序 例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z) 2.代码解析 <el-table ref="multipleTable" border tooltip-effect="dark" class="xg-table" style="width: 100%&q

  • 解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    先看效果图,这是弹窗效果,要求就是弹窗出现和消失时候不是很突兀,要有过渡效果. 首先看弹窗出现的实现思路,先加一个beforeActive类,再加一个active类.我们看审查元素,一开始display:none: 在beforeActive中display:block:只是background: transparent;然后在一定时间后再加上active类.问题就来了,在打开弹窗代码中,如下图,settimeout第二个参数小于60ms效果就会不稳定,有时候有过渡效果,有时候没有过渡效果. /

  • 解决vue项目中某一页面不想引用公共组件app.vue的问题

    Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档:点击进入 在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面: <template> <div id="app"> <home-header v-show="!(path ==='/') "

随机推荐