图片加载为什么使用变量就加载失败，直接写在 src 中就加载成功？

Question

为什么使用变量图片就加载失败；

直接写在 src 中图片就加载成功？

Answer 1

怎么调整楼上都说了，简单说下为什么吧

你要理解你的 template 最终都会经过编译打包输出
直接写在 src 里编译阶段会识别 '@/assets/images/logo.png' 按照 webpack 配置，小图片会转成 base64，大图片就会转换为类似 /dist/img/logo.png

但是你直接写在字符串变量里，编译阶段不会处理字符串变量，然后原样输出，最终打包目录里是找不到 '@/assets/images/logo.png' 这个文文件

Answer 2

如果使用变量，就需要在script import

<script>
import logo from "@/assets/images/logo.png"

export default {
    data() {
        this.logo = logo
    }
}
</script>

这样才可以正确载入

Answer 3

或者使用require的形式，例如

data() {
return {
logo: require('@/assets/images/logo.png')
}
}

Answer 4

直接写在src中编译时会找到路径对应的图片并做相应的处理

变量中写成require('...')或import ... from ..，编译时也会相关路径的资源做处理

Answer 5

原因和解决方案上面都写了

说个题外话。我上次踩这个坑还是18年，一晃我居然都干了四五年了