vue cli图片无法显示

最新推荐文章于 2020-12-20 19:58:37 发布
原创 最新推荐文章于 2020-12-20 19:58:37 发布 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍在Vue项目中，如何正确配置动态添加的图片路径，确保打包后图片资源能够正常加载。关键在于将图片放置于src/assets目录，并使用require方法引入。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue打包以后可能会出现data里动态添加的图片的路径没有自动更改，需要把图片放到项目的src/assets/文件夹内
然后在data里面引用

								src: require("../assets/img/xljtb.jpg"),
动心.
关注
vue-cli3+ 打包至非根目录静态资源(图片，字体文件)路径加载错误，导致不显示，丢失
weixin_42467467的博客
03-03 3117
缘由 当开发vue项目时，ele字体图标显示无任何问题，然而当项目打包部署上线时，图片，字体文件等静态资源就丢失了，通过分析是因为项目打包时是非根目录，通过publicPath进行了配置，静态资源没有匹配到publicPath，因此打包出来的路径错误，导致页面不显示资源 分析 由于是打包至非根目录下，我们需要对webpack中的publicPath进行配置，同时记得修改router.js中的base地址 // 打包至非根目录下 // vue.config.js publicPath: "/tpls/vue/
vue css 引入asstes中的图片无法显示的四种解决方法
11-21
这里主要针对的是vuecli2中的一些问题。 vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets 关于这两者之间的区别，和如何选择这里就不多说了！ 这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！ 正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！ 这是因为，出于某些原因，有人修改了config目录下的index.js文件中的build对象中assetsPublicPath的值，这个值初始化的时候是 斜
Vue-cli图片资源无法显示的原因及解决方案
Kyoku0604的博客
11-15 3529
由于Webpack在打包时，默认静态图片会被打包成base64编码格式，导致打包生成的路径与图片名（带hash值）和开发时放置的位置与名称并不一致。发生以下类似轮播图片无法显示的问题。 上图的图片路径与实际开发时的资源位置及名称都不相同。 开发时，如果静态配置页面图片位置，webpack在打包时会自动识别，并正确处理为以下网页实际路径： 但当我们使用v-if等指令，动态创建图片时，效果就不理想...
解决vuecli3中img src 的引入问题
10-15
主要介绍了解决vuecli3中img src 的引入问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli2和3打包之后打开index.html白屏以及图片不显示问题
l17862868372的博客
08-28 1065
vue-cli2 打包白屏问题以及图片不显示问题 下边有3得配置 1.配置config文件夹下的index.js 配置如下： //找到buind:{}里边得assetsPublicPath，改成相对路径 assetsPublicPath: '/', 2.如果你的路由模式是history模式需要后端做如下配置： Apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html
彻底搞懂并解决vue-cli4中图片显示的问题实现
10-14
在使用vue-cli4开发Vue.js项目时，图片显示问题是一个常见但容易忽视的细节问题，主要涉及路径的正确设置和webpack的处理机制。以下是关于解决vue-cli4中图片显示问题的详细知识点介绍。 ### 图片路径问题 在vue-...
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中动态引入图片时，常常会遇到图片资源无法被正确加载，浏览器显示404错误的情况。这个问题在项目中使用了动态路径来加载图片资源时尤为常见。本文将从以下几个方面深入探讨这个问题，并提供一个解决...
Vue动态加载图片在跨域时无法显示的问题及解决方法
10-15
本文主要探讨了在Vue项目开发中遇到的一个常见问题——动态加载的图片在跨域环境下无法正常显示的问题。这个问题的根源在于浏览器安全策略限制，导致前端应用无法直接从不同源（域名、协议或端口）的服务器上加载...
vue中图片加载不出来的问题
王小森的成长博客
09-21 1万+
在vue中普通的img标签的普通 的src属性，加载不出来图片， 你应该发现它们的地址都是经过解析的，与原来的不一样。 你可能只是忘了在src属性中加上这些东西： “ ./”所以导致vue不解析该地址。
Vue中显示img图片，显示不出来怎么办？vue显示图片
热门推荐
黄钟飞的博客
09-13 10万+
1、近期在学习Vue中发现了一个难点就是显示图片&lt;img&gt; 试了很多办法都不行，有的还保错。后来我找了很多人，以及网上找资料终于被我给找到了。 2、如何你是一个普通组件的话，那么这样就可以了 &lt;img src="../assets/images/fk.jpg" width="100%"&gt; 上面这种是写死的，下面让我们试试进行动态显示； 或者这样写也可以：...
vue-cli中解决css引用图片打包后找不到文件资源的问题
和子昭的博客
08-03 4073
1.在CSS中引入图片   #slider1 { background-image: url(./bg02.jpg); background-size: cover; } 注意：此处的图片与索引文件在同一个目录下; 在开发环境下背景图片是可以好好的显示的，但是打包后提示找不到资源，报错： 解决的方法有两种：暴力的和柔和的 （1）开始使用暴力的方法，在配置文件（webpac...
解决关于cli4.0以上版本创建的vue项目，打包成app图片不显示的问题
NC_star的博客
06-17 1248
在用cli4.0创建了一个vue项目，在某一个组件中使用了一个img标签。项目build后，通过Hbuilder打包成app，其他可以功能均正常，只有图片不显示。经过查找资料，发现解决办法都是cli旧版本的方法，即在文件中进行配置，但是新版的cli根本没有这些文件。而后，经过测试发现，是路由的模式使用了history模式所影响，将其更改为哈希模式后，再次打包成app。运行在手机上可以正常显示图片 ...
vue-cli 打包后背景图出不来解决方法
清风明月的博客
10-31 1489
vue-cli用npm run build打包之后，打开index.html页面，背景没有加载出来解决办法： 修改build/utils.js文件里面的ExtractTextPlugin，添加：publicPath: ‘…/…/’, 具体代码如下： if (options.extract) { return ExtractTextPlugin.extract({ use...
在vue-cli中引入图片不能正常显示
aoju0739的博客
04-11 429
我们用vue-cli构建项目的时候，图片的地址是后台的，可是在template中item.img放到src中是不能正常显示的为什么？ 原因是：url-loader无法解析js动态生成的路径。 解决： 将图片放在src的同级的static这个文件夹中，然后地址和之前是一样的放在store的index.js中；在template中img应该这样写 <img :src='item...
vue-cli 脚手架、vue组件引入图片出错解决办法
感谢遇到的每一个人的博客
11-06 3696
问题：vue-cli脚手架中 组件相互嵌套，图片路径报错。 解决办法：首先把图片引入进来，然后再付给data()； &lt;template&gt; &lt;img :src="picUrl"/&gt; &lt;/template&gt; &lt;style&gt; &lt;/style&gt; &lt;script&gt; //首先要引入图片 import pic fr
vuecli3中src的文件_解决vuecli3中img src 的引入问题
weixin_39714307的博客
12-20 409
最近公司要做一个在线ps 的项目 但是后台没写完, 我在用本地图片上传预览的时候 发现图片不能显示, 解决的办法 是//页面的结构 export default {data() {return {img:require("../../assets/fapiao.jpeg"),//这里只能使用require的方式去使用 如果img 是数组, 就用//[require("../../assets/...
Vue CLI+Element UI封装cropper.js图片裁剪组件实战教程
"这篇文章主要讲解如何在Vue CLI项目中结合Element-UI库，利用cropper.js来封装一个图片裁剪的Vue组件。作者通过图文并茂的方式提供了详细步骤，适合需要此类功能的开发者参考。" 在前端开发中，图片裁剪功能常常被...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值