后端返回的文本都是带html的标签，其中img图片点击时是不会有预览效果的
</p>\n<p><img src=\"https://img2018.cnblogs.com/blog/1066844/201810/1066844-20181016104201116-766887489.png\" alt=\"\"/></p>\n<p>源码如下：</p>\n<div class=\"cnblogs_code\"><img id=\"code_img_closed_79938da4-4a23-42ea-bac6-3bc8a9675fe4\" class=\"code_img_closed\" src=\"https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif\" alt=\"\"/><img id=\"code_img_opened_79938da4-4a23-42ea-bac6-3bc8a9675fe4\" class=\"code_img_opened\" style=\"display: none\" src=\"https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif\" alt=\"\"/>\n<div id=\"cnblogs_code_open_79938da4-4a23-42ea-bac6-3bc8a9675fe4\" class=\"cnblogs_code_hide\">\n<pre><span style=\"color: #0000ff\">class</span> SpringBootBanner <span style=\"color: #0000ff\">implements</span><span style=\"color: #000000\"> Banner {\n\n </span><span style=\"color: #0000ff\">private</span> <span style=\"color: #0000ff\">static</span> <span style=\"color: #0000ff\">final</span> String[] BANNER = { \"\"<span style=\"color: #000000\">,\n </span>\" . ____ _ __ _ _\"<span style=\"color: #000000\">,\n </span>\" /\\\\\\\\ / ___'_ __ _ _(_)_ __ __ _ \\\\ \\\\ \\\\ \\\\\"<span style=\"color: #000000\">,\n </span>\"( ( )\\\\___ | '_ | '_| | '_ \\\\/ _` | \\\\ \\\\ \\\\ \\\\\"<span style=\"color: #000000\">,\n </span>\" \\\\\\\\/ ___)| |_)| | | | | || (_| | ) ) ) )\"<span style=\"color: #000000\">,\n </span>\" ' |____| .__|_| |_|_| |_\\\\__, | / / / /\"<span style=\"color: #000000\">,\n </span>\" =========|_|==============|___/=/_/_/_/\"<span style=\"color: #000000\"> };\n\n </span><span style=\"color: #0000ff\">private</span> <span style=\"color: #0000ff\">static</span> <span style=\"color: #0000ff\">final</span> String SPRING_BOOT = \" :: Spring Boot :: \"<span style=\"color: #000000\">;\n\n </span><span style=\"color: #0000ff\">private</span> <span style=\"color: #0000ff\">static</span> <span style=\"color: #0000ff\">final</span> <span style=\"color: #0000ff\">int</span> STRAP_LINE_SIZE = 42<span style=\"color: #000000\">;\n\n @Override\n </span><span style=\"color: #0000ff\">public</span> <span style=\"color: #0000ff\">void</span> printBanner(Environment environment, Class<?><span style=\"color: #000000\"> sourceClass,\n PrintStream printStream) {\n </span><span style=\"color: #0000ff\">for</span><span style=\"color: #000000\"> (String line : BANNER) {\n printStream.println(line);\n }\n String version </span>=<span style=\"color: #000000\"> SpringBootVersion.getVersion();\n version </span>= (version != <span style=\"color: #0000ff\">null</span>) ? \" (v\" + version + \")\" : \"\"<span style=\"color: #000000\">;\n StringBuilder padding </span>= <span style=\"color: #0000ff\">new</span><span style=\"color: #000000\"> StringBuilder();\n </span><span style=\"color: #0000ff\">while</span> (padding.length() <<span style=\"color: #000000\"> STRAP_LINE_SIZE\n </span>- (version.length() +<span style=\"color: #000000\"> SPRING_BOOT.length())) {\n padding.append(</span>\" \"<span style=\"color: #000000\">);\n }\n\n printStream.println(AnsiOutput.toString(AnsiColor.GREEN, SPRING_BOOT,\n AnsiColor.DEFAULT, padding.toString(), AnsiStyle.FAINT, version));\n printStream.println();\n }\n\n}</span></pre>\n</div>\n<span class=\"cnblogs_code_collapse\">View Code</span></div>\n<p>对于banner的输出可以做如下修改，代码如下：</p>\n<p>banner.txt</p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #000000\"> _ooOoo_\n o8888888o\n </span>88\" . \"88<span style=\"color: #000000\">\n (</span>| -_- |<span style=\"color: #000000\">)\n O\\ </span>= /<span style=\"color: #000000\">O\n ____</span>/`---'\\____\n .' \\\\| |// `.\n / \\\\||| : |||<span style=\"color: #008000\">//</span><span style=\"color: #008000\"> \\</span>\n / _||||| -:- |||||-<span style=\"color: #000000\"> \\\n </span>| | \\\\\\ - <span style=\"color: #008000\">//</span><span style=\"color: #008000\">/ | |</span>\n | \\_| ''\\---/'' | |<span style=\"color: #000000\">\n \\ .</span>-\\__ `-` ___/-. /<span style=\"color: #000000\">\n ___`. .</span>' /--.--\\ `. . __\n .\"\" '< `.___\\_<|>_/___.' >'\"\".\n | | : `- \\`.;`\\ _ /`;.`/ - ` : | |<span style=\"color: #000000\">\n \\ \\ `</span>-. \\_ __\\ /__ _/ .-` / /\n======`-.____`-.___\\_____/___.-`____.-'======\n `=---=<span style=\"color: #000000\">'\n</span>^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^<span style=\"color: #000000\">\n 佛祖保佑 永无BUG</span></pre>\n</div>\n<p>application.yml</p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #000000\">spring:\n banner:\n charset: UTF</span>-8<span style=\"color: #000000\">\n location: banner.txt</span></pre>\n</div>\n<p>application</p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #000000\">@SpringBootApplication\n</span><span style=\"color: #0000ff\">public</span> <span style=\"color: #0000ff\">class</span><span style=\"color: #000000\"> Application {\n </span><span style=\"color: #0000ff\">public</span> <span style=\"color: #0000ff\">static</span> <span style=\"color: #0000ff\">void</span><span style=\"color: #000000\"> main(String[] args) {\n</span><span style=\"color: #008000\">//</span><span style=\"color: #008000\"> SpringApplication application = new SpringApplication();\n</span><span style=\"color: #008000\">//</span><span style=\"color: #008000\"> application.setBannerMode(Banner.Mode.OFF);\n</span><span style=\"color: #008000\">//</span><span style=\"color: #008000\"> application.run(Application.class, args);</span>\n SpringApplication.run(Application.<span style=\"color: #0000ff\">class</span><span style=\"color: #000000\">, args);\n\n }\n}</span></pre>\n</div>\n<p>程序启动后如下：</p>\n<p><img src=\"https://img2018.cnblogs.com/blog/1066844/201810/1066844-20181016104519285-2131955741.png\" alt=\"\"/></p>\n<p>更高级的操作，后续再进行研究</p>\n<p> </p>"现在需求是把图片进行可以预览处理（在这里用vant的ImagePreview组件）
1.先把文本通过v-HTML渲染（articles.content就是后端返回的文本标签）
<div
class="article-content markdown-body"
ref="articleContent"
v-html="articles.content"
></div>2.引入vant的图片预览组件
import { ImagePreview } from 'vant'
3.封装图片预览函数（在哪里调用自己决定）
imgpreview() {
// 得到所有的img节点
const articleContent = this.$refs.articleContent
const imgs = articleContent.querySelectorAll('img')
const images = []
imgs.forEach((img, index) => {
images.push(img.src)
console.log(images)
img.onclick = () => {
ImagePreview({
// 预览的图片地址数组
images,
//图片下标
startPosition: index,
});
}
})
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
