vue 动态设置img的src路径

相信很多小伙伴都遇到过图片路径问题，一种是样式中的背景图，一种是img标签。

动态切换img的src时，图片路径失败，主要是因为vue没有把我们写的路径字符串当做路径处理，而是纯字符串处理了。 如下3种写法，1是正常的静态路径；2是常出错的动态路径写法；3是正确动态路径写法。

<template>
  <div class="container">
    <img src="@/assets/logo.png" />
    <img :src="pic" />
    <img :src="pic1" />
  </div>
</template>

<script>
import pic1 from '@/assets/logo.png'

export default {
  name: 'test',
  data() {
    return {
      pic: '@/assets/logo.png',
      pic1: pic1,
    }
  },
  methods: {},
}
</script>

查看3中写法在浏览器中的渲染结果，如下图

由此可见，第2种动态路径，没有按路径解析，直接做字符串渲染了。

使用import导入的图片会按照路径解析出正确路径，当然有同学使用require引入图片的方式，也是可以的。

<img :src="require('@/assets/images/sidederLogo.png')" class="sidebar-logo">

//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
	return{
		imgUrl:require('./assets/logo.png')
	}	
}