vue 图片不显示，引用路径出错

最新推荐文章于 2024-06-23 13:07:37 发布
最新推荐文章于 2024-06-23 13:07:37 发布
阅读量3.4k 收藏 2
点赞数
分类专栏： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36708991/article/details/79905508
版权

在做项目中，遇到把img图片作为变量放在data里，引用会发现图片不显示，以为是路径的问题，其实是webpack的事。

方案1： 使用require将图片进入，写法如下
image: require( '../../assets/img/mine.png')

模板：

< img :src=" image" >
方案2：把图片放在static文件夹中，如下

然后直接在data里面这样写

image：'../../static/img/mine.png'

风情雨
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 解决data中定义图片相对路径页面不显示的问题
10-14
主要介绍了vue 解决data中定义图片相对路径页面不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue打包之后文件路径出错的问题
08-27
本文将深入探讨如何解决Vue打包后文件路径出错的问题。 首先，我们来分析问题的原因。Vue CLI在构建项目时，会根据配置文件进行一系列优化，包括代码分割、压缩等。其中，静态资源的路径处理是关键部分。默认情况下...
解决vue项目运行后使用require()图片也不显示方法
z2428478096的博客
11-17 7419
最近在写vue项目时发现一个问题，在项目运行打包后却没有显示图片，明明路径也是正确的。在网上查询大部分文档都是说使用require(‘图片路径’)可以进行解决，运用到项目中发现还是没有用，到后面我对require方法进行查询后，得到了解决办法。 比如：我在assets下的images存放了图片，运行后 这样不显示 解决办法： <img class="headimg" :src="require(imgurl2)">使用require('图片存放目录' + 图片地址...
vue引入图片
最新发布
xiaohua0708day的博客
06-23 266
2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/也可以在代码中直接使用icon（等同于Vue2中的require('@/assets/图片')）1、在js代码里面 或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用。情况一，在html里面的<img src='引入'>用下面代码。Vu3引入图片路径的方法。
vue3循环引入图片不显示问题 require无法使用问题
前端程序猿的博客
03-13 1547
【代码】vue3使用require。
vue项目动态引入图片无法显示的问题
qq_53987671的博客
08-01 4018
vue项目动态引入图片不显示的问题解决
Vue项目中使用require的方式导入图片资源，本地运行无法打开的问题
qq_41373791的博客
10-24 700
无意中发现，项目中一个require导入的图片图标，在file协议下居然可以正常显示，然后就比对了一下不同之处，发现这个图标图片打包的时候被编译成了base64了。于是就查了base64图片的特殊之处，查找得知base64格式的图片是不需要发请求获取的（一般是减少页面请求优化的手段之一，但是存在会使图片体积增加的问题）。其中有一块需要展示一个拓扑图，绘制拓扑图时用了定义了一个图片节点，然后图片的导入方式是 require的方式，然后本地npm run dev启动的时候可以正常显示，没有任何问题。
webpack配置打包后图片路径出错的解决
08-27
Webpack配置打包后图片路径出错的解决 在使用Webpack进行项目打包时，常见的一个问题是图片路径出错的问题。这个问题的出现是因为Webpack在打包时会对图片进行处理，导致图片的路径出错。本文将介绍两种解决该问题...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
Vue背景图打包之后访问路径错误问题的解决 在 Vue 项目中，背景图打包之后访问路径...解决 Vue 背景图打包之后访问路径错误问题的关键是理解背景图片和图片 img 的区别，并且选择合适的解决方案来避免路径错误的问题。
解决vue打包之后静态资源图片失效的问题
11-27
在Vue项目开发中，我们经常会遇到一个问题：当使用`...如果选择其他路径配置，确保正确调整引用路径，以确保图片能够被正确加载。希望这篇文章能帮助你解决实际遇到的问题，如果你有更多的疑问或经验，欢迎交流分享。
vue :src 文件路径错误问题的解决方法
12-11
首先先说明下vue-cli的assets和static的两个文件的区别，因为这对你理解后面的解决办法会有所帮助 　assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的...必须使用绝对路径引用这些文件，这
vue中，加载稍微大点的图片，本地测试没问题，打包后不显示。
04-12
vue中，加载稍微大点的图片，本地测试没问题，打包后不显示。 1、检查图片是否存在； 2、检查图片引入方式是否正确 import或者require引入 3、图片编码后太大，超过默认设置，需要在 webpack.base.conf.js文件中修改限制。
mine:扫雷代码实现，结合Vue框架
05-11
Mine 扫雷代码实现，结合Vue框架实现页面数据绑定 核心代码mine.js
vue中图片不显示问题 - vue中静态资源加载
好好学习天天向上
01-24 3342
变量的值，该变量的值就是一个字符串，所以最后显示的是字符串没有解析地址去获取图片。是一个 ESM 的原生功能，会暴露当前模块的 URL。require是在运行时加载，import是编译时加载。中会将图片来当做模块来用，因为是动态加载的，所以。为了能让Webpack返回正确的资源路径，使用。根据结果来看，相对地址没有被解析。这里的错误原因理解的是动态绑定。进行解析，然后返回处理过的。进行解析，然后返回处理过的。解析到的路径都会被解析为。提供的一种加载能力，但是。提供的静态资源载入方法，
vue-cli build 打包图片加载失败
HGGshiwo的博客
07-22 547
新版的vue-cli，图片位置放在assets下，通过./assets/xxx.png进行引用。 打包时出现404，此时在工程目录中新建vue.config.js 添加 module.exports = { publicPath: './' } 重新build 即可。
问题描述：vue项目中引用data中的图片路径无法显示
weixin_45629646的博客
03-01 964
vue项目中引用data中图片路径无法显示
vue 学习中坑（读取本地的图片，不展示的问题）
汪原野
03-11 2885
1，读取本地图片 如果是在assets里面的图片资源需要require的 <img class="goods-image" :src="require('../assets/'+item.img)" alt="" /> 或者 <img class="goods-image" :src="require('@/assets/'+item.img)" alt="" />...
vue 图片路径请求错误
h_eader的博客
12-31 734
vue 图片路径请求错误返回默认图片
vue项目引入本地图片不显示的解决方法
china-quanda
04-07 7709
vue项目引入本地图片不显示的解决方法
vue2 打包后 dist文件路径出错
03-30
可能是你的配置文件中没有正确设置打包后的文件路径，或者在使用时没有正确引用路径。 如果你使用的是 vue-cli，可以检查一下 `vue.config.js` 文件中的配置是否正确设置了 `outputDir`，例如： ``` module....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值