解决Vue中动态渲染图片路径报错问题

今天在做项目的时候在本地assets中后动态渲染加载图片，死活加载不出来，F12控制台提示图片存在路径错误，但是不使用动态渲染，一模一样的路径，就可以渲染出来，就很神奇。

        

代码如下，可以看见动态渲染的地址直接写的地址一模一样，但就是渲染不出来。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <img alt="Vue logo" :src="url" />
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      url: "./assets/logo.png",
    };
  },
};
</script>

其实原因就在于放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。可在Vue CLI官网看出：

其中说到了直接路径<img alt="Vue logo" src="./assets/logo.png" />会编译为 require('./image.png')

所以通过动态渲染不能直接写 

data() {
    return {
      url: "./assets/logo.png",
    };
  },

必须写上require

data() {
    return {
      url: require("./assets/logo.png"),
    };
  },

这样图片就能成功渲染了，不在出现路径错误。