Vue批量图片显示时遇到的路径被解析问题

 更新时间:2019年03月28日 11:07:01   作者:彳卬  
这篇文章主要介绍了Vue批量图片显示时遇到的路径被解析问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近在学Vue,感觉很难理解,学不懂。

昨天晚上开始第一个页面的搭建,脑子感觉通了一点,大概知道该怎么做了。

在放置轮播图时,要调用很多图片,图片路径在data的一个数组里,用v-for循环(因为还不会做轮播图,从网上找的代码)

图片路径是对的,但是不显示,就用普通img标签放了个图片看了一下,这样


网页上却变成了这样

于是我把每个图片都放了一次,把每个解析后的地址都粘贴在数组里,成了


但是这种方法也太蠢了,以后不能也这样办吧

就在网上查了一下,要加一个require,很多帖子里的图片路径都加了个require,那就试试


成功! 但是不知道是什么原理,大概是把路径的字符串封装起来了?

然后又去查了查require是干啥的,感觉用过 ,但不知道哪里用过


使用位置

require是运行时调用,所以require理论上可以运用在代码的任何地方

require本质
require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量

这样的话就把路径字符串变成变量了

以上所述是小编给大家介绍的Vue批量图片显示时遇到的路径被解析问题详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 解决element DateTimePicker+vue弹出框只显示小时

    解决element DateTimePicker+vue弹出框只显示小时

    这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue如何动态绑定img的src属性(v-bind)

    vue如何动态绑定img的src属性(v-bind)

    这篇文章主要介绍了vue如何动态绑定img的src属性(v-bind),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 关于net 6+vue 插件axios 后端接收参数问题

    关于net 6+vue 插件axios 后端接收参数问题

    接到这样一个项目需求是这样的,前端vue 必须对象传递后端也必须对象接收,接下来通过本文给大家介绍下net 6+vue 插件axios 后端接收参数的问题,需要的朋友可以参考下
    2022-01-01
  • Vue3封装自定义指令的操作步骤

    Vue3封装自定义指令的操作步骤

    在 Vue 3 中,封装自定义指令可以帮助你更好地复用一些常见的DOM操作逻辑,自定义指令可以用于处理一些特定的用户交互行为,本文给大家介绍了Vue3封装自定义指令的示例,需要的朋友可以参考下
    2024-11-11
  • Vue动态加载ECharts图表数据的方式

    Vue动态加载ECharts图表数据的方式

    这篇文章主要介绍了Vue动态加载ECharts图表数据的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • el-select下拉选择缓存的实现

    el-select下拉选择缓存的实现

    本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • 解决vue3项目打包后部署后某些静态资源图片不加载问题

    解决vue3项目打包后部署后某些静态资源图片不加载问题

    这篇文章主要给大家介绍了如何解决vue3项目打包后部署后某些静态资源图片不加载问题,文中通过图文结合的方式讲解的非常详细,有需要的朋友可以参考下
    2024-05-05
  • vue translate peoject实现在线翻译功能【新手必看】

    vue translate peoject实现在线翻译功能【新手必看】

    这篇文章主要介绍了vue translate peoject实现在线翻译功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue关于Promise的使用方式

    vue关于Promise的使用方式

    这篇文章主要介绍了vue关于Promise的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue组件简易模拟实现购物车

    Vue组件简易模拟实现购物车

    这篇文章主要为大家详细介绍了Vue组件简易模拟实现购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12

最新评论