vue项目打包后图片路径出错

最新推荐文章于 2024-07-17 20:15:29 发布
最新推荐文章于 2024-07-17 20:15:29 发布
阅读量794 收藏
点赞数
分类专栏： vue webpack 文章标签： webpack 打包图片路径出错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bamboozjy/article/details/80924868
版权
vue 同时被 2 个专栏收录
71 篇文章 3 订阅
订阅专栏
webpack
8 篇文章 0 订阅
订阅专栏

1.可以直接把图片移动到对的路径下（看浏览器审查代码地方看图片引入的路径是什么）

2.更改配置传送们

ps：其实开始项目前直接把图片资源放到static文件夹下就可以省去路径错误麻烦

竹子js
关注
专栏目录
解决vue项目打包后提示图片文件路径错误的问题
08-27
主要介绍了解决vue项目打包后提示图片文件路径错误的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue项目图片路径问题
weixin_30438813的博客
06-17 4971
一般情况下我们为了能在本地显示效果，写图片路径会直接这样写，但是在实际中图片一般都是动态上传的， 所以，在vue中一般是这样的： 但是这样你会发现，图片根本显示不出来，只是显示了个图片的图标。 后来发现通过require了路径之后可以正常显示。 但是这样感觉还是不太好，因为我不想声明怎么多变量。于是就成了这样： 先把图片通过import导入，前面的../../直...
vue3 快速入门 (三) : vue中的图片路径
最新发布
朱豪凯的博客
07-17 1933
介绍在Vue3中，引用图片路径的3种方式
Vue.js中的图片引用路径问题
weixin_30673715的博客
07-25 413
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形： 使用一： 在data里面定义好图片路径： /*错误写法*/ imgUrl:'../assets/logo.png' 在template模板里面：/*错误写法*/ <img src="{{imgUrl}}"> 以上是错误写法，我们应该用v-bi...
vue学习笔记9——图片路径问题
aeoliancrazy的博客
09-05 1096
vue学习笔记，是根据网上的一些帖子，自己在学习过程中实际情况，总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。
vue项目打包 图片路径报错 解决方案
weixin_43151921的博客
04-09 819
build文件 加上这一句话 confige 文件修改一下这个 就ok了 打包时就会解决这个问题了
解决Vue打包之后文件路径出错的问题
08-27
本文将深入探讨如何解决Vue打包后文件路径出错的问题。 首先，我们来分析问题的原因。Vue CLI在构建项目时，会根据配置文件进行一系列优化，包括代码分割、压缩等。其中，静态资源的路径处理是关键部分。默认情况下...
webpack配置打包后图片路径出错的解决
08-27
Webpack配置打包后图片路径出错的解决 在使用Webpack进行项目打包时，常见的一个问题是图片路径出错的问题。这个问题的出现是因为Webpack在打包时会对图片进行处理，导致图片的路径出错。本文将介绍两种解决该问题...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
当图片小于 10KB 时，url-loader 会将其转换为 base64 格式，但是在 CSS 中访问图片路径时，会出现路径错误的问题。 解决这个问题有四种方法： 1. 使用小图片作为背景图片（建议）： 将小于 10KB 的图片作为背景...
Vue打包后访问静态资源路径问题
12-13
图片路径出错啦！！！ 解决方法： 1.先找到config下的index.js文件 把最后的’/’ 改为 ‘./’ 2.接着把图片地址改为 以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持...
vue项目引用font-awesome字体打包路径报错
weixin_34387284的博客
03-04 738
正常引入font-awesome字体，打包后字体引用路径报错。 字体文件放在static/fonts目录下，但是浏览器中显示的引用路径是： static/css/static/fonts/... 在项目build/utils.js文件中，找到 ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader'...
vue webpack打包后图片、js、css路径错误的完美解决方法
weixin_56242672的博客
07-27 4679
项目用rundevbuild打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。
vue 打包后 static 中图片路径不对的问题，腾讯T2大佬手把手教你
2401_84139728的博客
04-11 718
没错，其实在我们准备打包项目之前，需要考虑的一个问题是：【我们的项目最终是要部署在根目录还是子目录】如果是部署在，并不会出现什么问题，因为你的资源文件放在static中，然后你在引用的时候，都是这样的路径来引用（不管是css中，还是template中），这样是不会有任何问题的。大家看到我这个项目的访问路径，应该就知道，我这是属于 【】 部署的情况。那么在部署的时候，就有可能出现本文要说的这个问题 【vue 打包后 static 中图片路径不对的问题】所以，本文后续内容的前置条件就是部署。
Vue 使用tinymce遇到的一些坑
热门推荐
wei_wenlong的博客
11-08 1万+
现在网上有很多介绍vue引用tinymce的方法，例如：https://blog.csdn.net/Amanda_wmy/article/details/88550155|https://blog.csdn.net/liub37/article/details/83310879 | https://blog.csdn.net/shangc_/article/details/80...
Vue打包项目图片等静态资源的处理
lyxkgc的博客
01-03 4668
项目打包，默认是打包在根目录下面的。当然我们可以通过设置，打包到任意子目录中去。 但是，当项目中引入资源的，比如：引入图片资源、js资源、或者字体图标之类的。那么可能在这个中间又会踩坑。 1、在vue文件引入图片 例如，我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在 vue 文件中用下面的代码来使用这张图片。 <img src="static/image/lyf.jpg" alt=""> 注意，最前面不要加 / ，如果是这样操作的话，会变成相对根目录调用图片。如
vue服务器打包显示图片,vue-cli中打包图片路径错误的解决方法
weixin_29843603的博客
08-09 1870
我们在项目打包的过程中，可能经常会遇到图片路径错误的问题，下面请大家随爱站技术频道小编一起来了解vue-cli中打包图片路径错误的解决方法吧！最近第一次使用vue-cli构建项目，第一次打包部署到服务器上的时候出现图片加载不出来，结合网上的方法，终于给摸索出来。将项目部署到服务器上分为两种：一种是直接部署到服务器的根目录，另外一种是部署到服务器的子目录下1.我们首先来说部署到根目录下 就是比如：w...
vue项目打包后图片路径问题
weixin_30396699的博客
07-27 567
当用vue-cli自动构建项目后，有两种运行方法，分别是： npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。 npm run build : 打包项目，资源使用相对路径，所以会出现路径错误问题。 绝对路径：从盘符开始的路径，如：C:\windows\system32\cmd.exe 相对路径：从当前路径开始的路径 我项目中静...
vue cli4 阻止图片转base64
Tankic的博客
02-23 2137
文章目录介绍功能步骤在项目根目录中新建vue.config.js文件vue.config.js文件内容 介绍 在使用vue cli4的过程中，我们遇到比较小的图片被转成了base64格式的编码。但实际使用的时候不需要，因为转码后的图片不够清晰，特别是在大屏和高分辨率的显示器时尤甚。 参考文献：vue.config.js配置参考 功能 避免vue cli4图片转码 步骤 在项目根目录中新建vue.config.js文件 vue.config.js文件内容 var path = require('path
Vue打包后图片路径问题
xingYev的博客
08-23 1215
1.vue 在背景图片引发的问题 在使用vue_cli时背景图片出现路径问题 需要在build文件夹的utils.js里添加 publicPath:’../../’就可以了 修改前 修改后 其中如果在行内样式中写了背景图片，这种方法是不可行的。 2.vue 在data里面引入图片引发的问题 在data中正常引入图片是这样的： export default { da...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值