<img :src="`@/assets/home_icon/${item.icon}`" alt="" />这样写为什么图片出不来
时间: 2024-05-30 07:07:51 浏览: 15
这种写法是Vue.js中绑定动态属性的语法,其中 `item.icon` 应该是一个图片文件名,如果图片没有显示出来,可能有以下几种原因:
1. 图片路径不正确:请检查图片文件是否存在于指定的路径中,路径是否正确;
2. Vue.js中的路径解析问题:如果你使用的是Vue-cli等脚手架工具创建的项目,图片路径可能需要使用 `require` 或者 `import` 等方式进行解析,具体方式可以查看Vue.js官方文档;
3. 图片格式问题:请检查图片格式是否正确,支持的格式包括jpg、png、gif等常见格式;
4. 图片文件名问题:请检查图片文件名是否正确,是否大小写敏感等。
希望以上几点可以帮到你。
相关问题
<template v-slot="{ row }"> <div class="cell-center button--default" @click="toDeatil(row.F_card_id)"> <img src="@/assets/images/student-list/icon-detail.png" alt="" /> </div> <div class="cell-center button--default" @click="toDeatil(row.F_card_id)"> <img src="@/assets/images/student-list/icon-detail.png" alt="" /> </div> </template> 怎么加display:flax
你可以在包裹这两个 div 的最外层元素上添加 `display: flex` 样式来使其变为 flex 布局,例如:
```html
<template v-slot="{ row }">
<div class="flex-container">
<div class="cell-center button--default" @click="toDeatil(row.F_card_id)">
<img src="@/assets/images/student-list/icon-detail.png" alt="" />
</div>
<div class="cell-center button--default" @click="toDeatil(row.F_card_id)">
<img src="@/assets/images/student-list/icon-detail.png" alt="" />
</div>
</div>
</template>
```
```css
.flex-container {
display: flex;
}
```
<div class="top"> <img src="@/assets/qiehuan_dark.png" alt="" v-if="theme == 'chalk'" @click="changetheme" /> <img src="@/assets/qiehuan_light.png" alt="" v-else @click="changetheme" /> <span>2019-01-01 00:00:00</span> </div> </div> <div class="main" ref="main"> <div class="left"> <div class="fulltrend" :class="{ full: flag1 }"> <trend class="trend" ref="trend2"> </trend> <div class="iconfont icon-expand-alt icon" @click="fullscreen1" v-if="!flag1" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen1" v-else ></div> </div>优化后代码
<div class="top">
<img
:src="theme == 'chalk' ? '@/assets/qiehuan_dark.png' : '@/assets/qiehuan_light.png'"
alt=""
@click="changetheme"
/>
<span>2019-01-01 00:00:00</span>
</div>
<div class="main" ref="main">
<div class="left">
<div class="fulltrend" :class="{ full: flag1 }">
<trend class="trend" ref="trend2"></trend>
<div class="iconfont icon-expand-alt icon" @click="fullscreen1" v-if="!flag1"></div>
<div class="iconfont icon-compress-alt icon" @click="smallscreen1" v-else></div>
</div>
</div>
</div>
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE HTML> <html> <head> <title>搜索网站</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <noscript></noscript> </head> <body> 你好 尊敬的用户,欢迎使用本网站 本网站将为将您提供一下服务,如您有更好的意见,欢迎致信我们的邮箱 2653379060@qq.com 感谢您的支持 首页 热搜 联系 关于 <script src="assets/js/jquery.min.js"></script> <script src="assets/js/skel.min.js"></script> <script src="assets/js/util.js"></script> <script src="assets/js/main.js"></script> </body> </html>要在这段代码的左下角放一个轮播图,代码应该怎么写
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)