(已解决)VUE页面图片显示不出来

最新推荐文章于 2024-03-17 18:24:06 发布
最新推荐文章于 2024-03-17 18:24:06 发布
阅读量563 收藏 6
点赞数 7
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BrianGriffin/article/details/135825728
版权

通过vue-cil构建的脚手架项目，图片路径的显示需要使用require进行渲染

BrianGriffin
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 解决data中定义图片相对路径页面不显示的问题
10-14
主要介绍了vue 解决data中定义图片相对路径页面不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-img标签src使用https网络地址展示图片时无法显示
minionsH的博客
05-10 2024
在\public\index.html的head里面添加 <meta name="referrer" content="no-referrer">
Vue3照片本地渲染不显示 以及照片显示失败
q77777_7的博客
03-17 619
图片不显示原因及解决方法：assets在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，加载图片模块通过webpack的url-loader加载器来实现，url-loader是解析不了动态绑定的src的导致最终显示的地址是未处理的地址，所以要用相对路径src引入。明明img图片在同一路径下 且路径未发生错误为什么会照片打不开。在控制台点击图片切换按钮却可以切换。现在就可以正常显示了。
vue-cil动态绑定图片失效？Vue-cil中如何动态绑定图片，以及如何通过图床解决问题
weixin_47469299的博客
10-17 256
最近在学习Vue-cil构建项目时发现了不能通过动态绑定绝对路径的方法使用静态图片。于是通过学习了一些方法来使用。希望能帮到大家。
vue-cli构建的项目中图片路径以变量形式传入时显示解决办法
xm2by的博客
08-17 6747
vue-cli构建的项目中图片路径以变量形式传入时显示解决办法 直接将图片路径以变量形式传入时，页面时显示不出来的 解决方法： 使用require对图片路径进行引用； 参考文献 [1] vue-cil和webpack中本地静态图片的路径问题解决方案...
如何解决Vue无法显示网络图片的问题
hello world ！
08-22 6014
缘由 因为项目需求，项目中引用了图片的网络链接，但是发现了很奇怪的问题，图片链接如果在浏览器的地址栏中可以直接打开，如果在前端项目的Img标签中却无法被渲染。 如何解决 在vue项目中的头部添加meta标签 在index.html中添加：<meta name="referrer" content="no-referrer"> 或者在img标签中添加：<img referrerpolicy="no-referrer" src="xx"/> Referrer是什么 Referer是h
Vue获取数据库图片不显示的问题
m0_51523539的博客
08-13 5077
记一次错误，弄了一天 这是从后台数据库传输过来的图片路径 这是axios接收后台数据的代码 这是F12里面的图片路径 然后显示是这样的 这是我显示的代码 我之前使用require对代码部分进行了修改，也就是 把 :src=“like.gImage” 改成了 :src=“require(like.gImage)” 但是报错误 [Vue warn]: Error in render: “Error: Cannot find module ‘…/…/assets/img/home/like1.jpg’” 于是我尝
vue前后端分离图片无法显示的问题
爱学习的大雄的博客
04-20 3574
遇到的问题 在实现vue与后端实现图片上传与回显中我遇到了图片显示不出的问题（使用了虚拟路径进行配置），最后发现我是访问路径错误,同时也有文件名带中文的图片。 前端我使用的是el-upload组件来进行文件的上传 <template slot-scope="scope"> <div class="singer-img"> <img :src="getUrl(scope.row.pic)" style="width:100%"/> </
VUE脚手架引入静态资源图片出问题解决方案
qq_54896194的博客
07-16 520
我在做有关vue脚手架的项目的时候发现，静态资源图片导入的时候总是出现问题。发现自己的图片导入总是不显示。
关于后端返回图片url前端无法打开问题
lzh710679620的博客
05-08 1796
由于前端访问后端接口使用的是https协议,而后端返回图片的url使用的是http（使用的文件服务器），前端不用访问该url地址，会出现如下错误。产品需要实现一个上传图片的功能，后端选择使用文件服务器保存图片，返回一个url给前端展示图片。后端使用文件流形式返回图片给前端，前提是后端需要有接口可以把图片下载下来。
vue图片不显示
liujingfei1的博客
04-12 6760
vue中，加载稍微大点的图片，本地测试没问题，打包后不显示。 1、检查图片是否存在； 2、检查图片引入方式是否正确 import或者require引入 3、图片编码后太大，超过默认设置，需要在 webpack.base.conf.js文件中修改限制。 ...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
解决vue打包css文件中背景图片的路径问题
12-12
vue-cli写完的静态页面我们在node环境中引入没有问题，但是打包后放在Apache环境下，路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-...
Vue批量图片显示时遇到的路径被解析问题
12-13
图片路径是对的，但是不显示，就用普通img标签放了个图片看了一下，这样 网页上却变成了这样 于是我把每个图片都放了一次，把每个解析后的地址都粘贴在数组里，成了 但是这种方法也太蠢了，以后不能也这样办吧 ...
Vue的内联样式绑定，路径存在括号，不显示图片解决办法
dlchgg的博客
08-18 179
url转义字符 (——%28 )——%29 即
Vue项目中img标签无法显示网络图片的解决方案
泥鸽鸽的博客
08-01 1311
Vue中img标签无法显示图片的解决方案 找到index.html文件 在标签中添加这行代码 <meta name="referrer" content="no-referrer"> 再刷新即可
在vue项目中html2canvas实现网页为图片形式下载到本地
weixin_43983711的博客
11-27 1157
我的需求： 需求描述：将后台返回的链接 生成二维码 将二维码及以上的html 变成图片 ，保存在本地上。 下面我根据二维码生成图片用到了html2canvas渲染成canvas 1.项目中引用需安装 html2canvas npm install --save html2canvas // 在需要使用的页面中先引入html2canvas import html2canvas from 'h...
【iOS开发-29】解决方案：TabBar的图片不显示，只显示灰色的正方形
小小的客栈 大大的江湖
10-06 4663
解决方案：突出形状，淡化背景。把背景颜色设置为空。形状随便设置什么颜色。
vue2.0基于vue-cil使用vant组件图片预览报错问题，及解决方法
UVliuwei的博客
02-05 889
在vue-cil脚手架中使用vant组件首先查阅官方文档的时候一定要注意文档版本，因为我是基于vue2.0版本使用，所以查阅文档应在Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)中，vant2与vant4文档在图片预览这个组件中调用方式不同，使用vant4的方法会报错（楼主马虎踩得坑，一定要注意）；使用cnpm安装组件应该还是有问题，还是根据官方推荐使用npm进行安装，可靠不出错；修改完毕一定要重启服务器，一定一定！
vue echarts 显示图片
最新发布
04-18
Vue Echarts是一个基于Vue.js的图表库，它可以帮助我们在Vue项目中轻松地展示各种图表，包括图片。 要在Vue Echarts中显示图片，可以使用Echarts的自定义系列（custom series）功能。具体步骤如下： 1. 首先，确保你已经安装了Vue Echarts库。可以通过npm或yarn进行安装。 2. 在Vue组件中引入Echarts，并创建一个Echarts实例。可以使用以下代码： ```javascript import echarts from 'echarts'; export default { mounted() { this.initChart(); }, methods: { initChart() { const chartDom = this.$refs.chart; const myChart = echarts.init(chartDom); // 在这里配置Echarts的其他选项 // 创建一个自定义系列 myChart.setOption({ series: [{ type: 'custom', renderItem: function(params, api) { // 在这里绘制图片 const image = new Image(); image.src = 'your_image_url'; // 设置图片的位置和大小 image.style.x = api.coord([xValue, yValue]); image.style.y = api.coord([xValue, yValue]); image.style.width = '50px'; image.style.height = '50px'; // 将图片添加到Echarts容器中 chartDom.appendChild(image); }, // 其他系列配置项 }] }); } } } ``` 3. 在上述代码中，你需要将`your_image_url`替换为你要显示的图片的URL。你还可以根据需要调整图片的位置和大小。 4. 最后，在Vue模板中添加一个容器元素，用于渲染Echarts图表。可以使用以下代码： ```html <template> <div ref="chart" style="width: 400px; height: 300px;"></div> </template> ``` 这样，你就可以在Vue项目中使用Vue Echarts显示图片了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值