vue的图片需要用require的方式进行引入问题
更新时间：2022年03月28日 11:13:45 作者：黄不逗
这篇文章主要介绍了vue的图片需要用require的方式进行引入问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
图片用require方式进行引入
在vue中，我们有时候通过动态的方式加载图片，需要require的方式进行引入图片。
html
<image :src="rightIcon" mode=""></image> //图片 <view class="tab" :style="tabSrc">背景图片</view>
js
图片image
export default {
data(){
return(){
rightIcon: require("./image/membercenter.png")；
tabSrc:{backgroundImage: "url(" + require("../../static/yes.png") + ")"}
}
}
}require引入的图片和直接引入的图片有啥区别
require 是 node 中的一个方法，他的作用是 “用于引入模块、 JSON、或本地文件”。也就是说如果我们使用 require 来引入一个图片文件的话，那么 require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）。 而如果使用字符串的话，那么则是一个 string 类型的固定字符串路径。
我们知道，src 中引入的图片应该为图片的本身路径（相对路径或者绝对路径），而 vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包成 name.hash 的图片名，在这种情况下，如果我们使用固定的 字符串路径则无法找到该图片，所以需要使用 require 方法来返回 图片的编译路径。
简单的说，使用require定义之后，你就可以动态使用了，不用require你就只能写死的。不用的话， :src="’…/img/image.jpg’" 会被解析为字符串
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue是一种流行的JavaScript框架,用于构建用户界面,在Vue中,页面跳转通常使用路由(Router)来实现,除此之外还有很多方法,这篇文章主要给大家介绍了关于vue跳转页面的几种常用方法,需要的朋友可以参考下2024-05-05
本篇文章主要介绍了Vue+Element使用富文本编辑器的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了详解Vue3 中的计算属性及侦听器，文章围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的朋友可以看下一下2022-08-08
这篇文章主要为大家介绍了Pinia进阶setup函数式写法封装到企业项目实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据，这篇文章主要介绍了VUE中常用的4种高级方法,需要的朋友可以参考下2023-05-05
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
这篇文章主要介绍了vue 使用插槽分发内容操作,结合实例形式总结分析了vue.js使用单个插槽、具名插槽、作用域插槽相关操作技巧与注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了Vue悬浮窗和聚焦登录组件经验总结, 本文整理了实现悬浮窗以及聚焦登录组件的功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
最近公司需要做个项目,需要拖拽表格和自定义表格字段,本文主要介绍了vue中el-table实现可拖拽移动列和动态排序字段,具有一定吃参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vue实现鼠标移过出现下拉二级菜单功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
vue watch报错:Error in callback for watcher "xxx&qu
这篇文章主要给大家介绍了关于vue watch报错:Error in callback for watcher “xxx“:“TypeError:Cannot read properties of undefined的解决方法,需要的朋友可以参考下2023-03-03
最新评论