Vue img src 动态切换的一个解决方案

Vue img src 动态切换的一个解决方案

在Vue 中，如果img 的src 为动态切换的话， 会出现图片无法加载的情况。 网上已经有了很多讨论，在解决这个问题， 基本上都是大同小异。 这里记录一下自己的解决方案，可能会和某些方案雷同。

背景

采用vue cli 3 创建的项目目录结构和 vue cli 2 会有不同。 本文的式样环境为 vue cli 3 中。

创建一个组件 item.vue

<template>
  <div class="root">
      <img :src="getImgUrl" alt="">
      <div>
          <p class="name">{{name}}p>
          <p class="name">{{telephone}}p>
      div>
      <img :src="getNavImgUrl" class="left">
  div>
template>

<script>

export default {    
    props:{
        icon: String,
        name: String,
        telephone: String
    },    
    computed:{
        getImgUrl : function() {
            return './static/image/' + this.icon + '.png'            
        },
        getNavImgUrl : function() {
            return './static/image/navBack.png'
        }
    }
}
script>

<style>
.root{
    width: 100%;
    height: 7rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #939393;
}
.root > img {
    display: block;
    height: 4.3rem;
    width: 4.3rem;
    margin: 1.3rem 1rem 1.4rem 2.05rem;
}
.root > div {
    display: flex;
    flex-direction: column;
}
.name {
    font-size:1.4rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:1.9rem;
    text-align: left;
    margin: 0;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
style>

调用组件

这个代码，就是在 vue create 创建的例子中，把HelloWorld.vue 修改了一下

<template>
  <div class="hello">    
    <item name="Vingo" telephone="13800138000" icon="logo">item>
  div>
template>

<script>
import item from './item.vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components:{
    item
  }
}
script>


<style scoped>

style>

拷贝图片文件

• 在项目目录的public 目录下（vue cli 3 才有)
• 创建目录 static/image/
• 拷贝需要用到的图片到上面的路径中即可