vue/cli 重命名图片无法访问

Question

我可以像这样轻松地在任何组件上添加图像： <img src="@/images/q3.png"> 但是当我看到 devtools 时，src 有不同的名称 <img src="/img/q3.91066fb2.png">。 vue/cli 将图像添加到不同的文件夹，并在名称中添加一个随机数。问题是我需要使用 v-html 中的图像作为文本：v-html='<img src="@/images/q3.png">'（文本在数据变量中，这只是一种简化）但这不起作用显示一个空白图像。我该怎么做才能访问此图片？

Ps：我有多个图像，我需要一个适用于所有图像的解决方案

编辑：我发现这可能是重复的：。它帮助我看到问题出在路径上。所以我将图像文件夹更改为与 src 和 public 文件夹并排，并将路径更改为 <img src="images/q3.png"> 并且它起作用了。虽然我不知道这是否是最佳做法，但无法在 public 或 src 文件夹中创建图像文件夹。

编辑：按照建议，我可以将图像文件夹移动到 public 文件夹中，同时保持相同的路径 images/q3.png

Answer 1

我想你可以创建一个方法来加载图像 content（不是路径）并将 that 直接放入动态 HTML。像这样：

new Vue({
    methods: {
        generateImg(path) {
            let img = require(path);
            return '<img src="' + img + '">'
        }
    }
}

因此您将调用 generateImg("@/images/q3.png") 并将返回值放入您的 v-html。您可以将其重复用于其他图像。

我还没有测试过这个，但它对你有用吗？

--

或者，如果您将图像放在 public 目录中，您应该能够在不需要的情况下访问它们。

所以假设所有图像都在 public/images 中。现在 q3.png 的路径将是 yoursite.com/images/q3.png，因为 public 中的文件不是动态生成的（所以不会有像 91066fb2 这样的随机数 vue 添加到它），但是你可以只需在您的代码中使用 images/q3.png。

更多信息：

vue/cli 重命名图片无法访问

vue/cli renaming images unable to access

image

vue-cli