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

 更新时间:2020年08月31日 08:32:34   作者:老谢  
这篇文章主要介绍了彻底搞懂并解决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 属性的是一个变量,无法直接手动 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 图片显示 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.js常用指令汇总(v-if、v-for等)

    Vue.js常用指令汇总(v-if、v-for等)

    这篇文章主要为大家详细汇总了Vue.js常用指令及使用方法,包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Vue3全局属性app.config.globalProperties的实现

    Vue3全局属性app.config.globalProperties的实现

    Vue3中的app.config.globalProperties是一个强大的全局配置功能,允许我们在应用级别设置和访问属性,本文主要介绍了Vue3全局属性app.config.globalProperties的实现,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue3中 provide 和 inject 用法小结

    vue3中 provide 和 inject 用法小结

    父子组件传递数据时,使用的是props和emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦,这篇文章主要介绍了vue3中 provide 和 inject 用法,需要的朋友可以参考下
    2023-11-11
  • Vue Element前端应用开发之开发环境的准备工作

    Vue Element前端应用开发之开发环境的准备工作

    这篇文章主要介绍了Vue Element前端应用开发之开发环境的准备工作,对Vue感兴趣的同学,可以来学习一下
    2021-05-05
  • vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题

    vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题

    这篇文章主要介绍了vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • 浅谈Vue.use的使用

    浅谈Vue.use的使用

    这篇文章主要介绍了浅谈Vue.use的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 解决vue前后端端口不一致的问题

    解决vue前后端端口不一致的问题

    这篇文章主要介绍了解决vue前后端端口不一致的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-07-07
  • vue实现At人文本输入框示例详解

    vue实现At人文本输入框示例详解

    这篇文章主要为大家介绍了vue实现At人文本输入框示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue手写实现异步更新详解

    Vue手写实现异步更新详解

    这篇文章主要介绍了Vue手写实现异步更新详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2022-08-08
  • vue elementui动态添加el-input实例代码

    vue elementui动态添加el-input实例代码

    最近遇到一个新的需求,需要动态添加el-input,这篇文章主要给大家介绍了关于vue elementui动态添加el-input的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06

最新评论