v-用于动态图像src

Question

在

resources/images

目录中，我想通过

vue3-carousel

库显示 10 个图像，图像名称为

1.jfif

、

2.jfif

..等，但是属性绑定不能像这样工作，它会给出错误：

Property assignment expected.

：

        <Slide v-for="slide in 10" :key="slide">
            <div class="carousel__item">
                <img :src="../../images/{{slide}}.jfif" width="500" />
            </div>
        </Slide>

我也尝试过这样，使用模板字符串：

<img :src="`../../images/${slide}.jfif`" width="500" />

但它会在

public

目录中查找图像，它会给我类似

/images/2.jfif:1 GET http://localhost/images/2.jfif 404 (Not Found)

的错误

我该如何解决这个问题？谢谢

Answer 1

您可以将图像编码为 Base64，然后可以在绑定上使用它。

这个网站将为您做到这一点：https://www.base64-image.de/.

只需在那里上传您的图像，单击显示代码并复制“用于元素：”下面的内容。

由于 base64 编码非常大，我建议您存储在单独的文件中以保持代码井井有条。

示例： 图片.js

const image1 = 'data:image/png;base64...';
const image2 = 'data:image/png;base64...';
const images = [image1, image2];
export default images;

然后，您可以相应地在绑定上导入并使用它。

<Slide v-for="image in images" :key="image">
    <div class="carousel__item">
        <img :src="image" width="500" />
    </div>
</Slide>