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

为什么使用变量图片就加载失败;
image.png

image.png

直接写在 src 中图片就加载成功?
image.png

阅读 3.4k
5 个回答

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

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

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

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

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

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

这样才可以正确载入

或者使用require的形式,例如

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题