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

• Z时代
• 2024-02-14
• 分类：IT

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

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

回答：

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

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

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

回答：

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

<script>
import logo from "@/assets/images/logo.jpg"
export default {
    data() {
        this.logo = logo
    }
}
</script>

这样才可以正确载入

回答：

或者使用require的形式，例如

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

回答：

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

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

回答：

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

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

以上是 图片加载为什么使用变量就加载失败，直接写在 src 中就加载成功？ 的全部内容， 来源链接： utcz.com/p/937372.html