如何构建Vue动态资产(图像)路径

Question

我有一个包含多个元素(id、name、img_name(的列表。在我的资产文件夹中，我有一个子文件夹svgs(srs/assets/svg(。这里有svg(logo1.svg，logo2.svg(。如果我硬编码链接，它工作得很好：<img src="@/assets/svgs/brand1.svg" alt="">。

但是当我动态地(使用方法(构建它时，它不起作用。我得了404分。原因是它没有解释@@assets/。他认为这是一根绳子，也是小路的一部分。我需要改变什么才能让它工作？

<template>
... 
// inside a loop
<img :src="makeImgPath(item.img_name)" alt="">
...
</template>

...
methods() {
makeImgPath(imgName) {
return "@/assets/svgs/" + imgName + "svg";
}
}
...

网络称：404 newapp/@/assets/svgs/brand1.svg

Answer 1

正如您正确指出的，vue不会解释@/asstes。@也仅代表src/。因此，您可以将@替换为src，这样它就可以工作了。

makeImgPath(imgName = 'defaultImageName') { // suggestion
return "src/assets/svgs/" + imgName + "svg";
}