vue3中 实现 img 的绑定 从其他文件中引入图片 <p class="txt_centered_header" >政策信息管理 <img :src="icon_jump_white" /></p>代码展示
时间: 2024-09-20 17:11:41 浏览: 63
在Vue 3中,`<img>`标签用于加载图片资源,`:src`是v-bind指令的一个简写形式,用于动态绑定属性。为了实现在其他文件中引入图片,你需要先将图片保存在项目的某个静态资源目录下,比如`static/images`。
假设你的图片名为`icon_jump_white.png`,并且它位于`static/images`下,可以这样编写你的代码:
```html
<p class="txt_centered_header">
政策信息管理
<img :src="require('@/assets/images/icon_jump_white.png')" alt="Jump Icon">
</p>
```
这里我们使用了Vue的`require`函数来动态导入图片路径,`@/assets/images`是一个路径别名,通常在`.vue`组件的`build`配置文件(如`quasar.conf.js`或`vue.config.js`)中设置,表示相对于`src/assets/images`的路径。
注意替换实际的图片路径和别名,如果你使用的是Webpack或者其他构建工具,可能需要调整路径前缀。
阅读全文