javascript - Vue.js props img src 与 webpack 别名 (@) 绑定
问题描述
我的 vue 应用程序,使用别名进行 img-src 绑定。它运行直接使用。
<img src="@/assets/search.png" />
但是,此代码使组件,别名无法解析。
<template>
<div class="button-card">
<img :src="src">
</div>
</template>
<script>
export default {
name: 'Button Card',
props: {
src: {
type: String,
},
},
};
</script>
使用组件构建结果 html:
<div class="button-card">
<img src="@/assets/search.png">
<!-- should be with resolve: src/assets/search.png -->
</div>
Webpack 别名定义配置:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
为什么这段代码无法解析?或者我该怎么做才能让它运行?
解决方案
我认为应该使用data
而不是props
(您没有创建新组件并将道具发送给它)。
您可以尝试:
<img :src="require('@/assets/search.png')" />
这是以下的简写:
<template>
<div id="app">
<img :src="image" />
</div>
</template>
<script>
import image from "@/assets/search.png"
export default {
data: function () {
return {
image: image
}
}
}
</script>
希望能帮助到你!
推荐阅读
- cron - Cron 作业中的 */5 小时会在第二天下午 1 点完成吗?
- go - 在中间件中重写内容长度
- javascript - 如何在javascript中查找多个对象的索引?
- html - 使 div 填充高度但不扩展它(使用滚动条进行溢出)
- javascript - 流星方法函数返回不起作用
- google-play - 如何从我的帐户中删除其他人的 Play Store 控制台访问权限?
- android - android软键盘将被cordova中的输入覆盖
- python - 拍摄时乌龟停下来
- sql - 有没有更快的方法来匹配记录与另一个表的列中存在的值?
- javascript - ES6 类静态方法与函数