webpack打包，用require引入图片失败

最新推荐文章于 2024-01-03 20:05:52 发布
最新推荐文章于 2024-01-03 20:05:52 发布
阅读量769 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sophialise/article/details/118496300
版权
"当在Vue项目中遇到图片无法显示的问题，通常是因为设置了相对路径导致。解决方法是在vue.config.js中将publicPath改为绝对路径。例如，将图片引用更改为``，这样图片就能正常显示了。"
摘要由CSDN通过智能技术生成

如图，在页面显示图片是无效的，原因是我使用的是相对路径

原因是vue.config.js里面 publicPath路径设置为./相对路径

解决方法：将publicPath路径设置为绝对路径/

<img data-v-e303c704="" src="/static/img/404.a57b6f31.png" class="img">

这个图片就能显示了

sophialise
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 前端 require动态引入图片报错Error: Cannot find ‘@/static/image/xxx.png‘
GoAyano的博客
12-30 3337
vue 前端 require动态引入图片报错Error: Cannot find '@/static/image/xxx.png'
vue编译图片不显示，require()与require().default区别
weixin_45288512的博客
08-31 1286
vue打包图片，图片地址不存在或者出现[object module]
解决vue项目运行后使用require()图片也不显示方法
z2428478096的博客
11-17 7454
最近在写vue项目时发现一个问题，在项目运行打包后却没有显示图片，明明路径也是正确的。在网上查询大部分文档都是说使用require(‘图片路径’)可以进行解决，运用到项目中发现还是没有用，到后面我对require方法进行查询后，得到了解决办法。 比如：我在assets下的images存放了图片，运行后 这样不显示 解决办法： <img class="headimg" :src="require(imgurl2)">使用require('图片存放目录' + 图片地址...
webpack使用require注意事项
weixin_30706507的博客
01-28 137
点击查看 转载于:https://www.cnblogs.com/94pm/p/10331340.html
前端VUE2使用require请求图片资源，如找不到图片html页面直接报错的处理
m0_70547044的博客
06-13 1273
1 、getImg()为获取图片地址的方法，在标签中直接引用。2、methods里面定义方法getImg()
webpack之引入图片的实现及问题
10-17
最后，总结一下，webpack中引入图片的方式可以包括直接在CSS中使用import引入图片、在HTML中通过img标签的src属性引入图片，或者在JavaScript中通过require引入图片。这些操作都涉及到webpack的资源路径处理，需要...
webpack打包教程.zip_webpack打包原理vue
12-24
Webpack 是一个强大的模块打包工具，尤其在前端开发中被广泛使用。它的工作原理是将JavaScript、CSS、图片等资源视为“模块”，通过一系列配置和插件进行编译、打包，生成适合生产环境的静态资源。在Vue.js项目中，...
详解如何用webpack打包一个网站应用项目
08-29
可以看到，我们使用 `require` 语句来引入 CSS 文件和 JS 文件。 总结 使用 Webpack 打包网站应用项目可以将多个文件合并成一个文件，方便网站应用的开发和部署。通过配置 Loaders 和 Babel，我们可以将源代码转换...
webpack打包nodejs项目的方法
10-17
以下是如何使用webpack打包Node.js项目，特别是针对那些使用ejs作为模板引擎并存在特定问题的项目。 **适用情况** 在某些项目中，Node.js作为后端服务器，使用ejs模板引擎生成整个页面并返回给用户。这种情况下，...
详解webpack分离css单独打包
12-10
Webpack 是一个强大的模块打包工具，它可以将 JavaScript、CSS、图片等各种资源进行编译和打包。在 Web 开发中，为了优化加载速度和提高用户体验，有时我们需要将 CSS 分离出来，单独打包成一个或多个文件，然后部署...
vue 过滤项目没有使用的静态图片
张小胖
02-22 2125
1、怎么样知道项目那些图片有使用 ？ 2、怎么样知道使用的图片如何删除没有使用的图片 ？ 3、怎么样在 node 启动 js文件时候带标识 ？
webpack4 学习时打包图片时遇到的问题
webmazha的博客
04-12 4464
const path = require('path'); const uglify = require('uglifyjs-webpack-plugin');//代码压缩插件 const htmlPlugin = require('html-webpack-plugin');//html 打包工具 const extractTextWebpackPlugin = require('extract...
vue assets动态引入图片解决打包后图片路径错误不显示的问题
最新发布
yf18040578780的博客
01-03 1524
vue3 assets动态引入图片解决打包后图片路径错误不显示的问题
Webpack5 环境下 Openlayers 标注（Icon） require 引入图片问题
linzi19900517的博客
02-13 1436
构建新环境的时候，偶然发现 `Openlayers` 使用 `require` 的方式加载图片（`Icon`）报错，开始以为是 `Openlayers` 版本问题，后来经过尝试，发现是 `webpack` 配置问题：`在 webpack5 环境下，使用了 webpack4 的配置方式`，这里记录一下。
Vue项目中利用webpack的require.context实现批量引入/导入图片
楚楚梦厦的博客
12-27 2045
前端项目中难免会有需要几十种icon或者png等类型的图片的情况，如果一个个import未免太过繁琐。使用webpack的 require.context实现vue项目中的批量导入引入图片等静态资源
webpack5.0中关于html文件中的img标签的图片显示不出的解决方法
Coralpapy的博客
08-05 747
一开始，单纯的我，希望直接通过html-loader把index.html文件中的东西通过template模板复制到dist目录下，从而形成一个完整的完美的打包后的入口文件，然后。。。。一直失败！！！ 开始时，我的webpack.config.js的配置 { test: /\.(htm|html)$/i, use: { loader: 'html-loader',
webpack5打包图片报错——Module parse failed: Octal literal in strict mode && 图片不能正常显示
qq_45327886的博客
03-08 2524
Octal literal in strict mode webpack打包图片
解决webpack打包后图片加载失败的bug（适用于所有本地静态资源）
vvv3171071的博客
10-28 1692
最左的图片是解决后加载成功的，另外三张是加载失败的。 原因：webpack把img当成是一种资源，所以使用时要先引进，给路径加上require()即可~ 解决方法： 数组的第一个对象的pic_url是加了require()的，第二个是没加的，对应最初那张页面效果。所以第一张能显示，第二到第四张加载失败。 上红框为能加载成功的图片的路径（打包到了dist目录下的assets静态资源文件夹下），下红框为加载失败的路径（依旧是本地的原路径） 全部url都加上require()，完工！（手动水印，哈哈） ..
webpack项目，使用require.context动态加载本地图片
草莓不爱吃白菜的博客
06-11 2058
1.关于require.context 文章开头先介绍一下require.context的使用，它是一个webpack的api，可以通过这个方法获取一个特定的上下文，用来实现文件的批量自动化导入，在前端的项目中，如果遇到需要从一个文件夹下面引入很多模块的情况，就可以使用这个api遍历获取，从而摒弃掉使用多个import单个引入的方式。 ...
vue用require引入的图片在生产环境无法显示
05-26
在 Vue 中，使用 `require` 引入图片时，Webpack 会将图片转换成 base64 编码，因此在开发环境中可以正常显示。但在生产环境中，Webpack 会将图片打包成单独的文件，此时需要正确配置 Webpack 才能正确加载图片。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值