相信开发的小伙伴已经遇到这个问题了, 动态切换 img 标签的 src 时, 写的路径就是不生效, 原因是 vue 并没有把你的路径字符串当做路径来处理, 而是直接当做字符串了, 当然网上也有很多方法, 这里使用的是最有效的方法.
看代码:
使用导入资源的方式
- <template>
- <div @click="home">
- <img :src="home_url" alt="..." style="height: 10vw">
- </div>
- </template>
- <script>
- // 下面是导入两张图片的相对地址
- import home_no from '../static/icon/home_no.PNG'
- import home from '../static/icon/home.PNG'
- export default {
- name: "newbase",
- data () {
- return {
- home_url: home
- }
- },
- methods: {
- home() {
- this.home_url = home
- }
- }
- }
- </script>
这样就可以非常有效的, 动态改变 img 的图片路径.
来源: http://www.jb51.net/article/147641.htm