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：我有多个图像，我需要一个适用于所有图像的解决方案

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

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

Answer 1

我在想你可以创建一个方法来加载图像内容（不是路径）并将那个直接放入动态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，因为公共文件不是动态生成的（因此不会有像 91066fb2 这样 vue 添加到其中的随机数），但您可以在代码中使用 images/q3.png .

更多：https://stackoverflow.com/a/53628289