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

最新推荐文章于 2024-03-17 18:24:06 发布
最新推荐文章于 2024-03-17 18:24:06 发布
阅读量671 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43894901/article/details/116799804
版权
本文讨论了在Vue项目中遇到图片可以加载但无法渲染的问题。问题出现在动态生成的img标签上，其src路径没有被正确打包。解决方法包括将图片路径改为绝对路径或者使用require引入。通过修改代码，成功实现动态显示图片。建议参考相关文章了解更多解决方案。
摘要由CSDN通过智能技术生成

先看看代码

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

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

所以可以用require的方法引入

代码
1、先把picture（也就是路径）改成‘assets/yuehe.jpg’
在这里插入图片描述
2、动态引用图片的路径改成这个
在这里插入图片描述

效果：点击月河出现图片
在这里插入图片描述
最后推荐大家阅读这篇文章，里面列举了一些使用的方法
https://www.cnblogs.com/linzhifen5/p/11771662.html

@蛤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue动态加载图片在跨域时无法显示的问题及解决方法
11-21
问题：VUE开发时因为要访问后端的接口所以要配置请求转发，如果直接转发全部请求，那么VUE动态绑定的src也会转发到后端，因为图片在前端，所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内，直接编辑...
解决vue的 v-for 循环中图片加载路径问题
10-18
今天小编就为大家分享一篇解决vue的 v-for 循环中图片加载路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中对于img标签引入svg图片失败解决方案
weixin_56027497的博客
06-08 9114
在使用Vue.js中使用img的src引入svg路径图片导致的报错，解决方案有以下两种： 1.可以通过import导入 然后将它变成data中的数据,再在img中绑定
Vue中img的src是动态渲染时不显示的解决
10-15
今天小编就为大家分享一篇Vue中img的src是动态渲染时不显示的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Vue】vue-cli脚手架搭建项目静态资源图片渲染失败原因及解决方法
web-Danli的博客
11-08 1337
文章目录前言一、简单的vue-cli静态资源图片渲染失败二、动态的vue-cli静态资源图片渲染失败以select选择框为例子（选择不同的图片就渲染不同的图片）解决方法一：解决方法二： 前言 最近学习了vue-cli脚手架搭建项目，在静态资源图片渲染的时候出现了渲染失败的问题，通过搜索资料和咨询大佬，总结了以下原因： 1.vue-cli脚手架涉及到webpack的打包机制，最终页面并不会显示图片内容，原因在于图片路径并没有取打包后的资源路径。 2.在select选择中，require方法所返回的是字符串
vue中img的src动态渲染不显示
Julia_0502的博客
06-07 1713
vue中img的src动态渲染不显示 问题描述 根据不同状态显示不同的状态图标，原代码（不显示）如下： <img :src="`@/assets/device/${itemdata.deviceStateName}.png`" :alt="itemdata.modelName" > 实际上在引用的路径下这些图片是存在的，只是引用的方式不对，图片并没有被打包，显示引入路径，所以导致找不到该图片 解决办法 使用require引入图片
vue里面的img，其中src的地址不变，则不渲染
qq_36606438的博客
05-24 232
【代码】vue里面的img，其中src的地址不变，则不渲染。
vue 动态渲染图片 不出来
weixin_48178184的博客
05-24 1004
图片渲染不出来是路径问题， 当把路径放在assets里面是，它是相对路径，是经过webpack处理，引入的时候是通过./或者是../引用，如果有上千张图片渲染 <div v-for="(item) in inage" :key="item.id"> <img :src="require(`../assets/images/${item}`) "/> </div> 就可以了 第二种是绝对路径：放在public里面 ，是不经过webpack处理，图片通过 / 引用
vue图片加载失败时用默认图片替换的方法
10-16
在Vue.js应用中，处理图片加载失败的情况是常见的需求，特别是在提供用户界面时，确保即使图片资源出现问题，也能保持良好的用户体验。本篇文章将详细介绍如何在Vue中实现图片加载失败时用默认图片进行替换。 首先...
vue src动态加载请求获取图片的方法
10-17
在Vue组件的模板中，使用`<img>`标签的`src`属性绑定到`formData.avatar`，确保图片可以被正确渲染： ```html ``` 二、加载请求获取到的图片 1. **配置Webpack**： 在`build/webpack.base.conf.js`文件...
vue循环渲染本地路径图片不显示问题
欢迎欢迎
01-07 760
写代踩到过的坑，分享一下上代码 <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 v-for 中 img图片渲染不出来的解决方法
jjw_zyfx的博客
09-24 3383
vue v-for 中 img图片渲染不出来的解决方法
Vue3照片本地渲染不显示 以及照片显示失败
最新发布
q77777_7的博客
03-17 1660
图片不显示原因及解决方法：assets在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，加载图片模块通过webpack的url-loader加载器来实现，url-loader是解析不了动态绑定的src的导致最终显示的地址是未处理的地址，所以要用相对路径src引入。明明img图片在同一路径下 且路径未发生错误为什么会照片打不开。在控制台点击图片切换按钮却可以切换。现在就可以正常显示了。
Vue+elementUl div背景图无法显示 无法渲染
weixin_60457220的博客
08-03 466
【代码】Vue+elementUl div背景图无法显示 无法渲染。
vue图片不渲染问题
weixin_45581741的博客
09-30 1093
vue图片不渲染问题 //今天写图片渲染的时候发现一个问题就是，图片没显示出来，于是就找了一下原因 //这是渲染内容的循环 <img v-for="(item,index) in listData" :src="item.src" alt=""> //先看一下错误写法： data() { return { listData: [{ src: "../assets/img/machine26.png", }, {
vue3循环遍历图片渲染无效果
limif的博客
10-18 2088
路径写成"'../../assets/situation/'+item.img+'.png'"会没有效果。循环遍历展示图片：（注释部分也是可以渲染出来）绑定的图片路径必须写成src开头，也就是根目录,
关于vue动态渲染本地数据时，图片不显示问题
m0_60397142的博客
10-12 1007
这几天终于有空闲下来，规整一下我最近遇到的问题。 一般我们在动态渲染图片时，有时会遇到后端传过来的数据是一个图片名的情况，要求你把本地路径拼接上去，如 这时候，我们按照常规的写法 <img :src="../../assets/index/+'item.icon'/> 你会发现，图片区域没有显示，还是一片空白，记住一个小tips，当我们动态渲染本地图片时，一定要用require（）方法，才能使图片显示，所以你可能会这么写 <img :src="requi...
vue动态渲染本地路径图片不显示的解决方案，v-fro 渲染本地图片路径不显示（记录一下项目中的坑）。
qq_54753561的博客
01-24 3234
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、付费专栏及课程。

余额充值