<img :src=`~@/assets/images/${item.imgUrl}` alt="" /> 请问这样做为什么不对
时间: 2023-12-14 19:03:29 浏览: 28
这段代码使用的是 Vue.js 的语法,`:src` 是 Vue.js 绑定属性的一种方式,用于将数据绑定到元素的 `src` 属性上。
在这里,`~@` 是 Webpack 的别名,用于指向项目根目录。但是在模板字符串中使用别名时,Webpack 会将这个别名视为字符串的一部分,而不是解析成真正的路径。因此,你需要在模板字符串中使用 `require` 函数,将别名转换成真正的路径,例如:
```
<img :src="require(`@/assets/images/${item.imgUrl}`)" alt="" />
```
在这里,`@` 也是 Webpack 的别名,指向 `src` 目录,所以这里使用 `@` 代替了 `~@`。
这样做可以让 Webpack 在打包时正确地解析路径,并将图片打包到正确的位置。
相关问题
<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;
}
```
~@/assets/images/${item.imgUrl} 报错
这个报错看起来像是在使用模板字符串时出现的语法错误。可能是因为在模板字符串中使用了变量或表达式,但是没有用`${}`将其包裹起来。
请检查一下你的代码,确保`${item.imgUrl}`被正确地包裹在`${}`中,并且变量`item`已经被正确地定义和初始化。如果问题仍然存在,请提供更多的代码和报错信息,以便我更好地帮助你解决问题。