为什么在 Vue.js 中对 src 链接使用字符串插值时不显示我的图像？

Question

我正在使用 Vue.js并且无法从本地目录中获取几张图像。我觉得相当奇怪的是，当使用字符串插值时会发生这种情况，如下所示：

<img :src="`../../assets/images/${category.imgUrl}.jpeg`" :alt="category.name"> 

。而下面的代码导致预期的输出，即渲染图像。

<img class="app-link app-link--google" src="../../assets/images/googlestore.png" alt="Google play store link">

生成的src字符串以及第一个片段中的相对链接将与第二个片段相似，不是吗？我错过了什么？

下面是相关组件的完整代码。

<template>
<div class="explore">
<h2>Explore by category</h2>
<div class="categories">
<div class="category" v-for="category in categories" :key="category.name">
<router-link :to="`find${category.path}`">
<img :src="`../../assets/images/${category.imgUrl}.jpeg`" :alt="category.name">
<p>{{category.name}}</p>
</router-link>
</div>
</div>
</div>
</template>
<script>
import { categories } from '@/helpers';
export default {
name: 'explore',
data() {
return {
categories,
}
},  
}
</script>
<style lang="scss" scoped>
$body-color: #0f1721;
$text-color: #ffffff;
$link-color: #00a2c7;
</style>

Answer 1

如果要使用变量，则必须调用require()。

要么使用静态：

<img src="../../assets/images/something.jpeg" :alt="category.name"> 

或者，如前所述，当动态时，通过require()：

<img :src="require(`../../assets/images/${category.imgUrl}.jpeg`)" :alt="category.name"> 

为什么需要包含require()才能使其正常工作？

我想如果你先看一下src的渲染值，你会更好地理解它。你会注意到那里没有路径。最后，它变成了一个data:image字符串。

发生的情况是，因为它使用 webpack，所以您的应用程序不会部署为多个文件，而只是部署为一个大捆绑包(文件)。这意味着您拥有的所有组件都将混搭成一个大的.js文件。并且此文件还必须包含图像。因此，它们可以"在.js文件中"，它们将图像"内联"为data:image字符串。

当你静态声明src时，webpack 在"编译时"知道该图像的路径，并立即获取并内联它。

但是 webpack 不知道:src，所以它忽略了它。Webpack确实知道，otoh，require()是什么。基本上require('somefile')的意思是"将somefile的全部内容粘贴到此处"。当你require('someimage.jpeg')它做什么时，它会将该图像的内容粘贴为data:image字符串。