热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

Nuxtv-bind绑定imgsrc不显示的解决

这篇文章主要介绍了Nuxtv-bind绑定imgsrc不显示的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

问题:

使用v-for循环, :src="item.url",绑定图片无法显示,只能写成静态结构;

原因:

直接写成静态的,会经过webpack进行编译,从而得到打包后正确的图片真实路径。
如果你写成动态的,webpack就不会进行编译,原封不动的把'~/assets/img/home.png' 放到你图片的src里面,'http://xxx.xxx.xxx/~/assets/i...'不存在这张图片!

解决方法1:

把图片存在服务器,使用网络路径,

解决方法2:

使用require和相对路径引用图片

{ src: require("../static/gzEducation/fl/1.png") }
//跳出1层还是2层目录,根据自己的所在位置来决定

data中的数据:

 data() {
  return {
   flList: [
     { src: require("../static/gzEducation/fl/1.png") },
   ],
 }

vue循环结构:

  
背景图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文介绍了在 CentOS 7 系统中如何查看所有活动进程及其运行时间。通过使用 `netstat` 和 `ps` 命令,您可以轻松获取进程的详细信息,包括启动时间、用户、终端和命令等。 ... [详细]
  • 2023年最新指南:如何在PHP中屏蔽警告和错误
    本文详细介绍了如何在PHP中屏蔽警告和错误,包括多种方法和最佳实践,帮助开发者提升代码质量和安全性。 ... [详细]
  • 无线鼠标应用:Remote Mouse
    Remote Mouse 是一款功能强大的无线鼠标软件,可将您的手机或平板设备变为遥控器,完美模拟键盘和鼠标操作,实现手机远程控制电脑。 ... [详细]
  • 本文介绍了如何使用Postman构建和发送HTTP请求,包括四个主要部分:方法(Method)、URL、头部(Headers)和主体(Body)。特别强调了Body部分的重要性,并详细说明了不同类型的请求体。 ... [详细]
  • Linux 防火墙与端口管理必备命令
    在使用 Linux 系统进行服务部署和问题排查时,防火墙和端口管理是不可或缺的操作。本文将详细介绍如何查看防火墙状态、端口占用情况,以及如何开放和关闭端口,帮助初学者更好地掌握这些技能。 ... [详细]
  • 本文整理了一份基础的嵌入式Linux工程师笔试题,涵盖填空题、编程题和简答题,旨在帮助考生更好地准备考试。 ... [详细]
  • MongoDB核心概念详解
    本文介绍了NoSQL数据库的概念及其应用场景,重点解析了MongoDB的基本特性、数据结构以及常用操作。MongoDB是一个高性能、高可用且易于扩展的文档数据库系统。 ... [详细]
  • 本文详细介绍如何在忘记MySQL服务器密码的情况下进行密码重置,包括具体的步骤和注意事项。 ... [详细]
  • 本文将探讨UDP(User Datagram Protocol)协议的特点及其适用场景,与常见的TCP协议进行对比,帮助读者更好地理解和选择合适的传输协议。 ... [详细]
  • 阿里云服务器搭建详解——Ubuntu
    由于自己电脑配置跟不上,双系统一开,整个电脑就会变得非常卡顿,所以决定在阿里云买一个云服务器。听朋友说,学生买的话是非常便宜 ... [详细]
  • h5调用本地摄像头和麦克风一
    h5调用本地摄像头和麦克风一,Go语言社区,Golang程序员人脉社 ... [详细]
  • 使用HTML和JavaScript实现视频截图功能
    本文介绍了如何利用HTML和JavaScript实现从远程MP4、本地摄像头及本地上传的MP4文件中截取视频帧,并展示了具体的实现步骤和示例代码。 ... [详细]
  • 直播带货系统中的推流技术详解
    本文介绍了RTMP(实时消息传输协议)及其在直播带货系统中的应用,并详细探讨了带货直播系统的连麦方案,包括服务端合流和客户端合流的优势与劣势。 ... [详细]
  • 本文详细介绍了 Java 网站开发的相关资源和步骤,包括常用网站、开发环境和框架选择。 ... [详细]
  • 本文介绍了如何查看PHP网站及其源码的方法,包括环境搭建、本地测试、源码查看和在线查找等步骤。 ... [详细]
author-avatar
美竹
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有