vue项目webpack打包后图片不展示问题

最新推荐文章于 2024-06-03 10:46:42 发布
最新推荐文章于 2024-06-03 10:46:42 发布
阅读量838 收藏 10
点赞数 9
文章标签： vue.js webpack javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44217741/article/details/135503077
版权

最近遇到一个问题，vue项目本地运行中图片正常展示，打包之后，图片不展示，刚开始以为是图片路径问题，结果用了相对路径，依然是有问题，最后对比发现有的图片能正常展示，有的不行，发现不展示的图片是动态引入的，如下图
在这里插入图片描述
图片路径写在变量里，然后遍历展示，但是这样是不行的，这样webpack打包后图片是不展示的，于是用require的方式引入图片，这样打包后就能正常展示了
在这里插入图片描述

Tencent IT
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue打包后访问图片/图标不显示的问题
10-16
主要介绍了 解决Vue打包后访问图片/图标不显示的问题，本文给大家介绍的非常详细，具有一定的参考解决价值,需要的朋友可以参考下
解决vue3项目打包后部署后某些静态资源图片不加载问题
蒾酒的博客
05-12 1002
可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符，导致无法正确找到文件路径。因此，改用英文文件名后，服务器能够正确解析和访问到文件，所以图片显示正常。打开浏览器控制台发现这张图片报错404。然后访问时发现导航栏背景图片没加载。将背景图片名称修改成英文。开发完项目打包并部署。
vue关于引入本地图片打包之后图片失效问题
最新发布
amber_1210的博客
06-03 305
但是打包之后，图片报错显示404，找不到该图片。发现在该域名下直接接了src文件，但是该域名下并没有src文件夹。使用vite官网提供的方法。（new URL(url, import.meta.url)）1、在utils下面创建一个名为pub-use.ts的文件，方便获取assets的静态资源。2、在使用的页面中，引入该文件。
vue打包后背景图片不显示问题
weixin_34344677的博客
04-10 899
当用vue-cli自动构建项目后，有两种运行方法，分别是：npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。npm run build : 打包项目，资源使用相对路径，所以会出现路径错误问题。绝对路径：从盘符开始的路径，如：C:\windows\system32\cmd.exe 相对路径：从当前路径开始的路径构建后的项目, 都需要...
vue2/3解决项目打包后本地图片等资源找不到的问题
weixin_68658847的博客
05-23 1904
vue2/3解决项目打包后本地图片等资源找不到的问题
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2227
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue项目使用webpack打包后,图片不显示
weixin_45032622的博客
11-01 5746
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
vue项目打包后出现页面布局异常、图片显示不出来等问题
weixin_46545863的博客
07-25 6044
vue项目打包后出现页面布局异常、图片显示不出来等问题
vue3+vite项目，打包后，图片失效的问题
insist_life的博客
08-02 7524
第一次使用vue3+vite写一个项目，不太清楚这里的配置和vite构建工具的特性，所以在开发的时候，图片的路径都是用的相对路径；这样的静态路径引入，在开发和打包上测试环境都没有问题，都能正常显示！可以发现，在域名下直接接了src文件，但是这个域名下面是没有src文件夹的。所以浏览器报错了，同时页面没有图片显示，所以打包的时候，图片的路径出问题了！结尾：此文章仅为了下一次有相同的问题能够快速的解决，具体造成这种错误的原因需要去了解vite，有时间再说吧！这样的话，开发和上测试的时候，图片都能够正常显示了！
【webpack】webpack打包后, 静态图片资源不显示的若干个问题
每天进步一点点, 靠近小目标一点点~
11-15 3610
最近在搭建公司的前端组件库, vue写的, webpack打包后, 在项目中引用组件库 其中有个组件引用了静态图片资源, 然而打包后在项目中引用该组件的图片就不显示了 遇到了以下若干问题, 小小记录一下~
解决在vue项目中webpack打包后字体不生效的问题
10-18
总的来说，解决Vue项目中Webpack打包后字体不生效的问题主要涉及CSS编写习惯、Webpack配置以及浏览器兼容性。选择适合项目需求的方法，可以确保字体在生产环境中的正确显示。在开发过程中，及时检查控制台的元素样式...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue.js开发中，使用Vue CLI创建的项目通常会依赖Webpack进行构建和打包。Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际...
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
Vue项目webpack打包部署到服务器的实例详解
12-12
Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题，而且在经过我的询问，好多人在打包部署的时候都遇到了一些问题，下面就来说下，如何将Vue项目放置在服务器上，这里以Tomcat为例。 必须要...
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
FellAsleep的博客
05-31 7759
因为vite构建的vue3项目，无法使用require导入图片，需要处理。1.新建 utils/require.js 文件。
解决vue项目运行后使用require()图片也不显示方法
z2428478096的博客
11-17 7413
最近在写vue项目时发现一个问题，在项目运行打包后却没有显示图片，明明路径也是正确的。在网上查询大部分文档都是说使用require(‘图片路径’)可以进行解决，运用到项目中发现还是没有用，到后面我对require方法进行查询后，得到了解决办法。 比如：我在assets下的images存放了图片，运行后 这样不显示 解决办法： <img class="headimg" :src="require(imgurl2)">使用require('图片存放目录' + 图片地址...
vue2打包后图片资源无法加载的问题处理
zxczero的博客
09-08 1542
vue2打包后图片资源无法加载的问题处理
vue+webpack项目打包后背景图片加载不出来问题解决
weixin_42966151的博客
01-27 3112
vue+webpack项目打包后背景图片加载不出来问题解决
【Vue】关于开发中本地图片加载失败的经验总结
NineWaited的博客
06-07 8644
关于vue网页的开发过程遇到本地图片加载失败的解决方法
vue项目打包 webpack
05-25
Vue.js 是一个前端框架，它使用 Webpack 作为默认的构建工具，可以将你的项目打包成一个发布的文件。 以下是打包 Vue 项目的基本步骤： 1. 安装依赖 使用 npm 或者 yarn 安装项目依赖，包括 Vue.js 和 webpack 相关的插件和依赖。 2. 配置 webpack 在项目根目录下创建 webpack.config.js 文件，配置 webpack 打包和优化的相关参数，如 entry、output、module、plugins 等等。 3. 编写 Vue 组件和页面 根据项目需求编写 Vue 组件和页面，包括 HTML、CSS 和 JavaScript 代码。 4. 运行开发环境 使用 webpack-dev-server 运行开发环境，通过浏览器访问项目页面进行调试和测试。 5. 打包项目 使用 webpack 进行打包，生成可发布的文件，一般包括 HTML、CSS 和 JavaScript 文件，可以直接部署到服务器上。 以上是 Vue 项目打包的基本步骤，具体操作可以参考 Vue.js 和 webpack 的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值