vue中使用for循环生成img但是src 无效的问题 解决 require

news/2025/2/22 13:31:56

1. 使用情况一:直接把src的值写在img中

代码样式

<ul>
    <li >
        <img :src="./src/img/1.jpg" alt="">
        //按照你图片存放的路径
    </li>
</ul>

这样写完全没有问题 他会找到图片并进行显示

vuedatasrcimg_12">2. 使用情况二:把vue中data的src的值写在img中

<ul>
    <li v-for="(item,index) in newListCon" :key="index">
      <div class="item-img">
        <img :src="imgSrc" alt="">
      </div>
    </li>
</ul>

//
<script>
export default {
  name: 'SuccessCase',
  data() {
    return {
      imgSrc:"./src/img/1.jpg"
    }
  },
}
</script>

这种就有问题了 他的图片不会显示了???
表现形式就是
1.在网页上 你打开控制台 查看img标签的src 发现是./src/img/1.jpg
路径没问题啊 怎么不显示呢
解决:
把路径 用require包裹起来

imgSrc:require("./src/img/1.jpg"),

这样图片就可以显示了


http://www.niftyadmin.cn/n/724083.html

相关文章

CSS权威专家为您解读CSS优先级

CSS权威专家为您解读CSS优先级 转载请注明出处&#xff0c;css探索之旅-飘零雾雨的庄园 在讲CSS优先级之前&#xff0c;我们得要了解什么是CSS&#xff0c;CSS是用来做什么的。 首先&#xff0c;我们对CSS作一个简单的说明&#xff1a;CSS是层叠样式表&#xff08;Cascading S…

Dynamic CRM 2013学习笔记(三十八)流程1 - 操作(action)开发与配置详解

CRM 2013 里流程有4个类别&#xff1a;操作&#xff08;action&#xff09;、业务流程&#xff08;business process flow&#xff09;、对话&#xff08;dialog&#xff09;和工作流&#xff08;workflow&#xff09;。它们都是从 setting –> Process 进入&#xff0c;然后…

web developer tips (35):为js文件中的脚本库添加智能提示

原文地址&#xff1a;How to add Intellisense from script libraries for JS files 这是个示例&#xff0c;在vs2008里为js文件添加智能提示。 有两个js文件: Jscript1.js 包含如下代码&#xff1a; function validateForm() { } Jscript1.js&#xff08;在里面你想当前jsc…

vscode 设置vetur格式化文档时 属性不自动换行,一行显示

vscode 设置 格式化文档时 属性不自动换行、 js 代码不自动换行&#xff08;vue代码 data中定义的数据不自动换行 开始 找到已安装的vetur 的格式化工具 点击小齿轮 进入扩展设置 找到 这一个 点击settings,json 添加内容 把下面的内容复制进去 "vetur.format.defau…

raid5什么意思?怎样做raid5?raid5 几块硬盘?

一、raid什么意思&#xff1f; RAID是“Redundant Array of Independent Disk”的缩写&#xff0c;raid什么意思了&#xff1f;说白了&#xff0c;中文翻译过来通俗的讲就是磁盘阵列的意思&#xff0c;也就是说RAID就是把硬盘做成一个阵列&#xff0c;而阵列也就是把硬盘进行组…

c#扩展方法奇思妙用变态篇三:switch/case组扩展

变态篇二中给出了对if/else、swith/case及while 的扩展&#xff0c;大家评价各不相同&#xff0c;其实本人也感觉有点牵强。其中举了一个Swith扩展的应用&#xff0c;今天突然有了新想法&#xff0c;对它改进了一些。所谓“语不惊人死不休”&#xff0c;且看这次的改进如何。我…

如何通过控制台 给浏览器添加一个横向的滚动条放到上面 并显示滑动的百分比

目录可以在当前文章的网页下 F12打开控制台去试一试^ _ ^1.效果图2.为什么会玩这个3.首次创作效果图4怎么做的呢4.1创建一个元素p标签4.2把p设置样式 固定到左上角4.3避免网页导航栏的遮盖4.4设置大小和颜色值4.5插入到页面上4.6js动态的设置 滚动条的长度 [3 行代码]5.最终使用…

第四章

第四章 需求工程 主要介绍的是软件需求&#xff0c;需求工程过程&#xff0c;需求获取技术以及图书管理系统案例。 软件需求是决定软件开发是否成功的一个关键因素。开发人员应当学会正确地理解软件需求,实行开非完善但是高质量的需求开发和管理,最大限度地降低软件需求风险。…