Webpack+Vue2.0工程图片路径问题

最新推荐文章于 2023-12-26 16:46:29 发布
最新推荐文章于 2023-12-26 16:46:29 发布
阅读量1.5k 收藏
点赞数
分类专栏： vue 文章标签： webpack4 vue2 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37580852/article/details/79599593
版权

Webpack+Vue2.0工程图片路径问题

1.src目录结构

app.vue entry.js index.html assets
images //存放图片资源
styles //存放全局样式文件
…
components //Vue通用组件
tab.vue
table.vue
…
config //全局通用配置等
api.js
…
pages // 页面文件
tabs-base.vue
tab-home.vue
…
router //vue-router路由配置
routers.js

2.非 Vue-cli 搭建 Webpack - Vue2 工程

.*.vue文件中style标签中background-image属性

现象:背景图片无法加载

相关知识:
url-loader 在使用中需要配置publicPath和outputPath两个参数:

publicPath 参数回答了

最低0.47元/天 解锁文章
大史不说话
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.x 文件图片路径问题
陌上花开
10-19 3075
Vue.js打包后出现的图片路径问题
nnni
07-30 639
一、引 在写自己博客的时候出现的，在自己写的组件内没出现问题，但是在APP.VUE 内的背景图片都出现问题，没有被引用到。 百度了下方法，解决了。 //build/utils.js if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-...
vue打包前后图片、资源路径问题，以及动态加载图片问题
yiyueqinghui的博客
03-20 2422
打包后css,js,文件路径问题（空白页面问题） 解决方法： 打开config下index.js,修改build中assetsPublicPath: ‘./’ （即将绝对路径修改为相对路径） ##static目录下的 img资源动态绑定问题 1, 情况一 template中直接使用img地址,如下 <template> <div> ...
vue动态定义图片路径
web前端开发
11-19 1358
来源 |https://www.jianshu.com/p/fab484498e4e最近在使用vue动态设置图片路径的时候遇到了一些问题，特此整理。我想实现的效果：点击...
vue webpack打包后图片路径错误的完美解决方法
10-17
主要介绍了vue webpack打包后图片路径错误的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
webpack+vue+iview搭建管理后台
01-24
这个项目结合了Vue.js（版本2.0）的响应式框架、iView UI库（版本2.0）以及强大的模块打包工具Webpack，为开发者提供了一个完整的项目结构模板和实践案例。 Vue.js是当前流行的前端JavaScript框架，它的核心特性...
vue2.0和webpack学习
03-19
Vue 2.0 和 Webpack 是前端开发中的两个重要工具，它们共同构建了现代Web应用程序的基础。Vue 2.0 是一个轻量级、高性能的前端JavaScript框架，它以其易学易用、组件化和可扩展性而备受赞誉。Webpack 是一个模块打包...
vue2.0开发实践总结之入门篇
11-27
本文主要介绍基于 Vue 2.0 的开发实践，包括使用 Vue CLI 构建工具、Webpack 基础知识以及 Vue 项目的基本架构。 首先，Vue CLI 是 Vue.js 官方提供的命令行工具，它极大地简化了 Vue 应用的搭建过程。选择基于 ...
Vue2.0学习系列之项目上线的方法步骤(图文)
10-17
Vue2.0项目上线是一个重要的环节，涉及到将开发完成的应用转化为可供线上访问的形式。下面将详细阐述Vue2.0项目上线的关键步骤。 首先，**打包**是上线前必不可少的步骤。在Vue2.0项目中，你可以通过运行`npm run ...
基于vue2.0仿天猫移动端首页的SPA
07-19
**Vue2.0详解及其在构建SPA中的应用** Vue.js，由尤雨溪开发的轻量级前端框架，因其简洁的API、强大的功能和良好的社区支持，在Web开发领域备受推崇。特别是Vue2.0版本，引入了更多优化和改进，使得它在构建Single ...
vue 网络图片封装统一路径
leng0920的博客
04-13 1457
main.js // 静态资源访问路径(https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_h5为路径一样的那部分) Vue.prototype.H5_IMG_HOST = `https://eventimg.oss-cn-shenzhen.aliyuncs.com` 页面使用 //H5_IMG_HOST为main.js中Vue.prototype.H5_IMG_HOST中的最后一个单词，这个命名可以自定义 <template>
vue引入图片路径的三种主要方法
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-16 2万+
1、在js代码里面 或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）3、正常引入静态图片路径情况一，在html里面的用下面代码情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/
vue项目 图片引用
IT谷小白的Blog
11-07 4710
项目vue版本：vue 2.x 脚手架：webpack 1、静态引用图片 像logo、等一些不变的图片，通常直接是直接写s的 1.1、图片在assets下 创建webpack项目时会生成 /src/assets 如果图片在该文件下，可以通过此方式引用（直接引用路径）： <img src="@/assets/图片路径" > <!--<img src="../assets/图片路径" > 这里的 @ 指的是该项目 --> 1.2、图片在static下 也会自动生
【Vue】判断项目的某个文件夹中是否有指定的图片
最新发布
weixin_42342065的博客
12-26 666
【Vue】判断项目的某个文件夹中是否有指定的图片
Vue2.0中动态拼接图片路径
weixin_52479225的博客
08-31 1955
Vue2.0动态拼接图片路径
vue2动态获取图片路径的加载问题
weixin_62395055的博客
04-19 1251
created() { const id = this.$route.params.id; this.id = id; if (id === "Porifera" || id === "Hexactinelida" || id === "Demospongiae") { this.parentNode = "Sponge"; } console.log(this.parentNode, this.id); this.imgSrc = requ..
Vue中关于图片路径的写法问题
mercurialmush的博客
01-13 5723
vue里面关于图片路径的小坑！
vue之图片路径
qdxxdq的博客
09-16 1976
vue 图片路径 一般assets放内部的图片，static放外部修改的图片，不会编译（修改方便） assets里的资源在打包后会重命名， 用法： 1.将图片作为模块加载进去，比如images:[{src:require(‘./1.png’)},{src:require(‘./2.png’)}]这样webpack就能将其解析 <template> <div&g...
vue2.0项目配置：（一）vue.config.js配置
m0_56065511的博客
08-04 2536
vue2.0项目中各文件介绍以及配置相关......
webpack + vue 打包后本地运行网页空白
06-08
如果你使用 webpack + vue 打包后本地运行网页空白，可能是因为打包后的文件路径不正确，导致页面无法正确加载。 你可以尝试以下几个解决方案： 1. 检查打包后的文件路径是否正确，确保所有的文件都被正确地打包到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值