vue图片可以加载但无法渲染问题

最新推荐文章于 2024-03-26 16:56:40 发布
VIP文章 最新推荐文章于 2024-03-26 16:56:40 发布
阅读量621 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43894901/article/details/116799804
版权

先看看代码

这是<html 直接访问的
htm
下面这两张一个是数据格式，另一个是在函数里面调用，动态生成img的
在这里插入图片描述
在这里插入图片描述
效果以及显示的源代码
直接<div中的img可以显示，但是动态显示的img 无法显示，他们两个在渲染后的路径也是不一样的
在这里插入图片描述

大家看下面那个img src是…/assets/yuehe.jpg
实际上是没有打包

所以可以用require的方法引入

代码
1、先把picture（也就是路径）改成‘assets/yue

最低0.47元/天 解锁文章
@蛤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue动态加载图片在跨域时无法显示的问题及解决方法
11-21
问题：VUE开发时因为要访问后端的接口所以要配置请求转发，如果直接转发全部请求，那么VUE动态绑定的src也会转发到后端，因为图片在前端，所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内，直接编辑...
解决vue页面渲染但dom没渲染的操作
10-15
主要介绍了解决vue页面渲染但dom没渲染的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue图片加载失败时用默认图片替换的方法
10-16
主要给大家介绍了关于vue图片加载失败时用默认图片替换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
nuxt.js使用v-binding绑定img的src的路径，图片不能渲染
骑着代码去流浪
10-06 5439
改成使用require引入图片路径 require('../../assets/images/team/richard-nash.jpg') 参考：https://github.com/vuejs-templates/pwa/issues/42
vue动态渲染本地路径图片不显示的解决方案，v-fro 渲染本地图片路径不显示
最新发布
qq_37148353的博客
03-26 394
如果直接使用本地路径渲染是渲染不出来的，因为这种情况下渲染时会发送网络请求加你的本地地址所以渲染不出来。此时后面的路径就不是本地图片的路径了。这样怎么能找到路径？来看一下我的图片存放文件。
vue 图片路径 “@/assets“ 报错
m0_52318340的博客
07-11 2652
在更改背景图片时写的图片相对路径是这样的： 由于@在webpack 被resolve.alias配置下等价于/src，然后直接运行了程序结果报错了报错状态： 大概意思就是说，无法解析 asset 包经过查询资料找到了解决办法： 由于相对根目录的路径 “/assets/background.png” webpack不解析 此时需要在@前加上“~” 因为带“~”的路径 “~@/assets/background.png” 被webpack解析为 require(src/assets/background.p
vue 动态渲染图片 不出来
weixin_48178184的博客
05-24 954
图片渲染不出来是路径问题， 当把路径放在assets里面是，它是相对路径，是经过webpack处理，引入的时候是通过./或者是../引用，如果有上千张图片渲染 <div v-for="(item) in inage" :key="item.id"> <img :src="require(`../assets/images/${item}`) "/> </div> 就可以了 第二种是绝对路径：放在public里面 ，是不经过webpack处理，图片通过 / 引用
【Vue】vue-cli脚手架搭建项目静态资源图片渲染失败原因及解决方法
web-Danli的博客
11-08 1194
文章目录前言一、简单的vue-cli静态资源图片渲染失败二、动态的vue-cli静态资源图片渲染失败以select选择框为例子（选择不同的图片就渲染不同的图片）解决方法一：解决方法二： 前言 最近学习了vue-cli脚手架搭建项目，在静态资源图片渲染的时候出现了渲染失败的问题，通过搜索资料和咨询大佬，总结了以下原因： 1.vue-cli脚手架涉及到webpack的打包机制，最终页面并不会显示图片内容，原因在于图片路径并没有取打包后的资源路径。 2.在select选择中，require方法所返回的是字符串
vue3本地src图片循环渲染不显示？
はんみん的博客
09-04 1617
有可能并不是自己写错了路径，而是对渲染的理解还没弄明白我现在使用的是，当然这跟vue2，vue3没有直接的关系，只不过在vue3里我更喜欢像小程序一样直接写，不需要导入数组里，再用 require引入，显得，难用至极。
vue图片不渲染问题
weixin_45581741的博客
09-30 1057
vue图片不渲染问题 //今天写图片渲染的时候发现一个问题就是，图片没显示出来，于是就找了一下原因 //这是渲染内容的循环 <img v-for="(item,index) in listData" :src="item.src" alt=""> //先看一下错误写法： data() { return { listData: [{ src: "../assets/img/machine26.png", }, {
vue v-for 中 img图片渲染不出来的解决方法
jjw_zyfx的博客
09-24 3278
vue v-for 中 img图片渲染不出来的解决方法
基于Vue渲染与插件的加载顺序的问题详解
08-27
下面小编就为大家分享一篇基于Vue渲染与插件的加载顺序的问题详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue中动态渲染图片路径报错问题
weixin_75115821的博客
10-26 554
今天在做项目的时候在本地assets中后动态渲染加载图片，死活加载不出来，F12控制台提示图片存在路径错误，但是不使用动态渲染，一模一样的路径，就可以渲染出来，就很神奇。其中说到了直接路径会编译为 require('./image.png')这类资源将会直接被拷贝，而不会经过 webpack 的处理。代码如下，可以看见动态渲染的地址直接写的地址一模一样，但就是渲染不出来。这样图片就能成功渲染了，不在出现路径错误。
（转载自用）vue动态渲染本地路径图片不显示的解决方案，v-fro 渲染本地图片路径不显示（记录一下项目中的坑）。
weixin_46446301的博客
09-26 1976
转载用到的坑Vue图片渲染问题
Vue+elementUl div背景图无法显示 无法渲染
weixin_60457220的博客
08-03 377
【代码】Vue+elementUl div背景图无法显示 无法渲染。
vue循环渲染本地路径图片不显示问题
欢迎欢迎
01-07 732
写代踩到过的坑，分享一下上代码 <template> <div class="swipe"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="(item, index) in src" :key="index"> <img :src="item" alt=""&gt
vue里面的img，其中src的地址不变，则不渲染
qq_36606438的博客
05-24 194
【代码】vue里面的img，其中src的地址不变，则不渲染。
vue3循环遍历图片渲染无效果
limif的博客
10-18 1954
路径写成"'../../assets/situation/'+item.img+'.png'"会没有效果。循环遍历展示图片：（注释部分也是可以渲染出来）绑定的图片路径必须写成src开头，也就是根目录,
vue动态渲染本地路径图片不显示的解决方案，v-fro 渲染本地图片路径不显示（记录一下项目中的坑）。
qq_54753561的博客
01-24 3138
vue动态渲染本地路径图片不显示的解决方案，v-fro 渲染本地图片路径不显示（记录一下项目中的坑）。
vue3 页面加载完成后渲染
05-13
在 Vue3 中，可以使用 `onMounted` 钩子函数来监听页面加载完成后进行渲染。 示例代码： ```vue <template> <div> <h1>{{ message }}</h1> </div> </template> <script> import { onMounted, ref } from 'vue' export default { setup() { const message = ref('Hello, World!') onMounted(() => { // 页面加载完成后执行此函数 // 可以在此处进行数据渲染、网络请求等操作 console.log('页面加载完成') }) return { message } } } </script> ``` 在 `onMounted` 函数中，可以执行需要在页面加载完成后进行的操作，例如在此处进行数据渲染、网络请求等操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值